欢迎访问 生活随笔!

生活随笔

当前位置: 首页 >

使用canvas绘制楼梯(canvas直线绘制练习)

发布时间:2024/4/14 63 豆豆
生活随笔 收集整理的这篇文章主要介绍了 使用canvas绘制楼梯(canvas直线绘制练习) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>楼梯</title><style>canvas{/*border:1px solid red;*/}</style><script>window.onload = function(){var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');// 开始绘制楼梯,直线绘制context.beginPath();context.moveTo(0,0);context.lineTo(100,0);context.lineTo(100,100);context.lineTo(200,100);context.lineTo(200,200);context.lineTo(300,200);context.lineTo(300,300);context.lineTo(400,300);context.lineTo(400,400);context.closePath();context.strokeStyle = 'pink';context.fillStyle = 'skyblue';context.lineWidth = 3;context.stroke();// context.fill();}</script> </head> <body><canvas id="canvas" width="400px" height="400px"></canvas> </body> </html>

 

转载于:https://my.oschina.net/u/3759656/blog/2247229

总结

以上是生活随笔为你收集整理的使用canvas绘制楼梯(canvas直线绘制练习)的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。