canvas练习

xh1_2_3

于 2020-07-19 16:19:41 发布

阅读量139

点赞数

文章标签： canvas html5 js

本文链接：https://blog.youkuaiyun.com/xh1_2_3/article/details/107446932

版权

本文通过实例探讨了HTML5的Canvas元素及其JavaScript API的使用，详细讲述了如何利用canvas进行图形绘制，包括线条、形状、渐变等效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<canvas id="mc" width="600" height="600" style="border: 1px dotted black"></canvas>

var canvas = document.getElementById('mc');
var ctx = canvas.getContext('2d');
width = canvas.width;
height = canvas.height;
var len = 600;
var step = 10;
for(var i = len; i >= step; i = i-step)
{
	ctx.moveTo(0,i);
	ctx.lineTo(len+step-i,0);
	ctx.lineTo(len,len+step-i);

	ctx.moveTo(i-step,len);
	ctx.lineTo(len,len-i);

	ctx.moveTo(0,len-i);
	ctx.lineTo(len-i+step,len);
	
	ctx.strokeStyle = 'gray';
	ctx.stroke();
}