<canvas width="600" height="400"></canvas>
var myCanvas=document.querySelector('canvas');
//获取上下文
var ctx=myCanvas.getContext('2d');
ctx.beginPath();//每次画不同样式的直线都开始新的路径,这样才不会样式覆盖
//移动画笔
ctx.moveTo(100,100);
//绘制直线
ctx.lineTo(200,100);
ctx.strokeStyle="blue";
ctx.lineWidth=10;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100,300);
ctx.lineTo(200,300);
ctx.strokeStyle="green";
ctx.lineWidth=20;
//描边
ctx.stroke();
填充三角形:
首先我们画了一个三角形:
var myCanvas=document.querySelector('canvas');
//获取上下文
var ctx=myCanvas.getContext('2d');
ctx.lineWidth=10;
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,100);
ctx.stroke();
但是发现:
原因和之前线段模糊是一样的
解决:开启canvas的自动闭合
var myCanvas=document.querySelector('canvas');
//获取上下文
var ctx=myCanvas.getContext('2d');
ctx.lineWidth=10;
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.closePath();
ctx.stroke();
填充的话只要一个函数就行了:
ctx.fill();