复杂的内容都是有简单的线条结合而成的，想要绘制出复杂好看的内容先从画直线开始

canvas绘制直线先认识几个函数

beginPath()；开始一条路径，或重置当前的路径

moveTo(x,y)；用于规定直线的起点坐标

lineTo(x,y)；用于规定直线的终点坐标

closePath()；方法创建从当前点到开始点的路径

stroke()；方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色

利用上面的函数就可以简单的画出直线了

代码

当前浏览器不支持canvas，请更换浏览器再试

canvas.width= 1024;//设置canvas宽高canvas.height= 768;var context = canvas.getContext("2d");

context.beginPath();

context.moveTo(100, 100);

context.lineTo(700, 700);

context.closePath();

context.stroke();

}

接下来个直线添加点样式：

lineWidth；属性设置或返回当前线条的宽度，以像素计

strokeStyle；属性设置或返回用于笔触的颜色、渐变或模式

fillStyle；属性设置或返回用于填充绘画的颜色、渐变或模式

fill()；方法填充当前的图像(路径)。默认颜色是黑色

JavaScript代码如下：

当前浏览器不支持canvas，请更换浏览器再试

canvas.width= 1024;//设置canvas宽高canvas.height= 768;var context = canvas.getContext("2d");

context.beginPath();

context.moveTo(100, 100);

context.lineTo(700, 700);

context.closePath();

context.lineWidth= 5;

context.strokeStyle= "red";

context.stroke();

}

会绘制直线后我们接着来绘制一些图像，要绘制图像也是使用lineTo(x,y)，绘制三角形，代码如下

当前浏览器不支持canvas，请更换浏览器再试

canvas.width= 1024;//设置canvas宽高canvas.height= 768;var context = canvas.getContext("2d");

context.beginPath();

context.moveTo(100, 100);

context.lineTo(700, 700);

context.lineTo(100, 700);

context.lineTo(100, 100);

context.closePath();

context.lineWidth= 5;

context.strokeStyle= "red";

context.stroke();

}

这个时候在是实现一些复杂的图像，七巧板：

canvas绘制七巧板

当前浏览器不支持Canvas，请更换浏览器再试

var tangram =[

{p: [{x:0,y: 0}, {x: 800,y: 0}, {x: 400,y: 400}],color: "#caff76"},

{p: [{x:0,y: 0}, {x: 400,y: 400}, {x: 0,y: 800}],color: "#67becf"},

{p: [{x:800,y: 0}, {x: 800,y: 400}, {x: 600,y: 600}, {x: 600,y: 200}],color: "#ef3d61"},

{p: [{x:600,y: 200}, {x: 600,y: 600}, {x: 400,y: 400}],color: "#f9f51a"},

{p: [{x:400,y: 400}, {x: 600,y: 600}, {x: 400,y: 800}, {x: 200,y: 600}],color: "#a594c0"},

{p: [{x:200,y: 600}, {x: 400,y: 800}, {x: 0,y: 800}],color: "#fa8ecc"},

{p: [{x:800,y: 400}, {x: 800,y: 800}, {x: 400,y: 800}],color: "#f6ca29"},

];

window.οnlοad= function() {var canvas = document.getElementById("canvas");

canvas.width= 800;

canvas.height= 800;var context = canvas.getContext("2d");for(var i = 0; i < tangram.length; i++) {

draw(tangram[i], context)

}

}functiondraw(plece, cxt) {

cxt.beginPath();

cxt.moveTo(plece.p[0].x, plece.p[0].y);for(var i = 1; i < plece.p.length; i++) {

cxt.lineTo(plece.p[i].x, plece.p[i].y);

}

cxt.closePath();

cxt.fillStyle=plece.color;

cxt.fill();

cxt.strokeStyle= "black";

cxt.lineWidth= 3;

cxt.stroke();

}