HTML5画布（canvas）绘制三角形，矩形，圆形

canvas标签：

<canvas id="cavsElem"  width="400" height="300">您的浏览器不支持canvas</canvas>

 1.定义id属性是为了在JavaScript代码中引用元素2.标签中间的文字在浏览器不支持canvas的情况下才会显示3.canvas标签与img标签一样，有两个原生属性width和height默认300*500像素4.不要用css控制它的宽和高，否则可能会引起画布上的图形变形

要在画布中绘制图形，首先要通过JavaScript的getElementById()函数
获取到网页中的画布对象
var canvas =document.getElementById(‘cavsElem’);

注：canvas画布默认为透明，背景色可以定义

准备画笔：

有了画布之后，开始作画需要准备画笔，这只画笔就是context对象，
context对象是画布的上下文，也叫作绘制环境，是所有的绘制操作API的
入口，该对象可以使用JavaScript脚本获得

 var context=canvas.getContext('2d');参数2d代表画笔的种类，这里用来执行二维操作,把参数替换为webgl，执行三维操作

坐标起始点：

 var context=canvas.getContext('2d');context.moveTo(x,y);上述x,y都是相对于画布的最左上角，使用context对象的moveTo()方法进行设置，相当于移动画笔到某个位置

绘制线条：

在canvas中使用lineTo()方法绘制直线：
context.lineTo(x,y);
"x,y"为线头点坐标，lineTo( )方法用于定义从x,y的位置绘制一条直线
到起点或者上一个线头点

路径：

路径是所有图形绘制的基础，例如绘制直线确定了起始点和线头点，便形成了一条绘制路径，如果绘制复杂路径，必须使用开始路径和闭合路径的方法

 context.beginPath();     //开始路径context.closePath();  //闭合路径

开始路径的核心作用是将不同线条绘制的形状进行隔离，每次执行此方法
表示重新绘制一个路径，同之前绘制的路径可以分开样式设置和管理
闭合路径会自动把最后的线头和开始的线头连在一起

描边：

在canvas图形绘制中，路径只是草稿，真正的绘制先必须执行stroke()方法
根据路径进行描边

     context.storke();

利用Canvas绘制一个图形，基本步骤：

 1.创建画布：<canvas></canvas>2.准备画笔(获取上下文对象):canvas.getContext('2d');3.开始路径规划：context.beginPath();4.移动起始点：context.moveTo(x,y);5.绘制线(矩形，圆形，图片...)：context.lineTo(x,y)6.闭合路径:context.closePath();7.绘制路径：context.stroke();

绘制三角形：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="cavsElem">您的浏览器不支持，请升级浏览器</canvas><script>var canvas=document.getElementById('cavsElem');//获得画布var context=canvas.getContext('2d');    //获得上下文canvas.width=900;canvas.height=600;//设置标签的属性宽高和边框canvas.style.border="1px,solid #000";//绘制三角形context.beginPath();//开始路径context.moveTo(100,100); //三角形，左顶点context.lineTo(300,100);//右顶点context.lineTo(300,500);//底部的点context.closePath();  //结束路径context.stroke();  //描边路径 // context.fillStyle='pink'; //设置填充颜色// context.fill();  //填充</script></body>
</html>

使用JavaScript为画布设置宽高和边框，然后通过坐标确定了三角形的3个点
规划了绘制路径，最后描边，绘制出来三角形，
context.fill()方法用来填充

加上填充样式：
context.fillStyle=‘pink’;
context.fill();

绘制矩形：

 context.strokeRect(x,y,width,height);  //绘制矩形边框context.fillRect(x,y,width,height);  //绘制填充矩形

x,y代表矩形起点的纵横坐标，width和height代表要绘制矩形的宽和高，
需要注意的是两个方法可以单独使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="cavsElem">您的浏览器不支持，请升级浏览器</canvas><script>var canvas=document.getElementById('cavsElem');//获得画布var context=canvas.getContext('2d');    //获得上下文canvas.width=900;canvas.height=600;canvas.style.border="1px solid #000"; //设置标签的属性宽高和边框context.strokeRect(200,50,200,100);context.fillRect(200,200,200,100);//清除矩形// context.clearRect(100,100,200,150);</script></body>
</html>

清除矩形：
context.clearRect(x,y,width,height);
x,y代表要清除矩形起点的横纵坐标，width和height代表要清除矩形的宽高

上面代码加上 context.clearRect(100,100,200,150); 就是如下效果：

绘制圆形：

在context中可以使用arc()方法来绘制弧形和圆形

context.arc(x,y,radius,startAngle,engAngle,bAntiClockwise)
x,y代表arc的中心点，radius代表圆形半径的长度，startAngle代表以
starAngle开始（弧度），endAngle代表以endAngle结束（弧度），
bAntiClockwise代表是否是逆时针，设置true是逆时针，false则为顺时针

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="cavsElem" width="900" height="600">您的浏览器不支持，请升级浏览器</canvas><script>var context=document.getElementById('cavsElem').getContext('2d'); //获得上下文var canvas=document.getElementById('cavsElem');canvas.style.border="5px solid #ccc"; //设置画布边框context.beginPath();//开始路径context.arc(100,100,100,0,2*Math.PI,true); //会致圆形，true为逆时针context.closePath(); //关闭路径context.fillStyle='pink';//设置填充颜色context.fill(); //填充//绘制弧形context.beginPath();//开始路径context.strokeStyle="#fff"; //设置描边颜色context.lineWidth=5; //设置线的粗细context.arc(100,100,25,Math.PI/6,5*Math.PI/6,false); //绘制弧形context.stroke(); //描边</script></body>
</html>