Canvas 继续学习_H5之家 - 中国HTML5教程资源分享第一站

canvas教程

Canvas 继续学习

字号+ 作者：H5之家来源：H5之家 2018-03-11 09:08 我要评论( )

画一条直线 ...

技术分享图片

画一条直线

技术分享图片

<body>
<canvas>
您的浏览器不支持Canvas 

</canvas>

<script>
window.onload=function(){

var canvas=document.getElementById("canvas");
canvas.width=1024;
canvas.height=768;
var context=canvas.getContext("2d");

// 开始绘制
context.moveTo(100,100);
context.lineTo(500,500);
context.lineTo(100,500);
context.lineTo(100,100);

context.lineWidth="2"; //线条的粗细
context.fillStyle="red";
context.fill()//表示填充结合fillStyle使用
context.stroke()//说明绘制的是一条直线
context.closePath();//关闭绘制不受下面代码的影响

context.beginPath()//重新开始绘制，跟上面没有关系
context.moveTo(200,100);
context.lineTo(600,500);
context.strokeStyle="red";
context.stroke()
}

</script>
</body>