canvas

Canvas元素主要用于图形的绘制，可以描绘出;三角形，圆形，椭圆，正方体，以及盒子等 这些类型之间的创作，可以有效帮我们构建模型。
Canvas的一些简单的思路和用法：

首先是思路：在我们创作一个模型的时候需要先构建一个框架，例如下面这串代码，

<canvas id="myCanvas" width="800" height="1800" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.

第二步构建需要创作的图案或图形,例如下面我所构建的等边三角形一样，

var c=document.getElementById("myCanvas");
var box1=c.getContext("2d");
box1.moveTo(250,10);
box1.lineTo(150,150)
box1.lineTo(350,150)
box1.lineTo(250,10)
box1.stroke();

五角星代码

var c=document.getElementById("myCanvas");
var box2=c.getContext("2d");
box2.moveTo(90,120);
box2.lineTo(60,200);
box2.lineTo(140,150);
box2.lineTo(50,150);
box2.lineTo(130,200);
box2.lineTo(90,120);
box2.stroke();

长方体代码

var c=document.getElementById("myCanvas");
var box4=c.getContext("2d");
box4.moveTo(60,340);
box4.lineTo(90,300);
box4.lineTo(180,300);
box4.lineTo(150,340);
box4.lineTo(60,340);
box4.lineTo(60,450);
box4.lineTo(150,450);
box4.lineTo(180,410);
box4.lineTo(180,300);
box4.stroke();

以及圆形代码

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();