canvas元素是专门用来绘制图形的，它是一块无色透明的区域。相当于在页面中放置一块“画布”，可以在其中绘制图形，但是不是通过鼠标作画，而是需要利用javascript编写在其中进行绘画的脚本。
canvas元素需要指定ID、width、height三个属性；
<canvas id="canvas" width="400" height="300">a drawing of something</canvas>使用canvas元素，必须先设置width和height属性，出现在开始标签和结束标签的内容是后背信息，如果浏览器不支持canvas元素，就会显示这些信息；
绘制矩形需要经过的步骤
1）取得canvas元素的DOM对象；
2）取得上下文；
图形上下文是一个封装了很多绘图功能的对象。需要使用canvas对象的getContext方法获得图形上下文；
3）填充与绘制边框
绘图的两种方式：填充与绘制边框。
填充：指填满图形内部；
绘制边框：不填满图形内部，只绘制图形的外框。
4）设定绘图样式
绘图样式：主要针对图形的颜色而言；
填充的样式——fillstyle（填充的颜色值）
边框的样式——strokeStyle（填入边框的颜色）
5）指定线宽
使用图形上下文对象的lineWidth属性设置图形边框的宽度。
6）绘制矩形
fillRect（x,y,width,height）：填充矩形；
strokeRect(x,y,width,height)：绘制矩形边框；
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>canvas元素示例</title> <script type="text/javascript"> function draw(id){ var canvas=document.getElementById(id); if (canvas==null) { return false; } var context=canvas.getContext("2d"); context.fillStyle="#EEEEFF"; context.fillRect(0, 0, 400,300); context.fillStyle="red"; context.strokeStyle="blue"; context.lineWidth=1; context.fillRect(50,50,100,100); context.strokeRect(50,50,100,100); } </script> </head> <body onload="draw('canvas');"> <h1>canvas元素示例</h1> <canvas id="canvas" width="400" height="300" /> </body> </html>
7）擦除矩形区域
clearRect方法对矩形进行擦除，使得矩形区域之中的颜色全部变为透明；
context.clearRect(x,y,width,height);
路径
1.绘制圆形
1)创建圆形路径的方法
context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
x，y，radius表示的是起点横纵坐标以及半径；
startAngle：表示开始角度；
endAngle：表示结束角度；
anticlockwise：表示是否按逆时针方向进行绘制；true表示逆时针；false：表示顺时针方向；
arc方法不仅可以用来绘制图形，也可以用来绘制圆弧；
2）关闭路径后，路径的创建工作就完成了。但是还没有真正绘制任何图形；
3）绘制图形直接调用fill()（填充）或stroke()（绘制图形边框）。因为路径已经决定了图形的大小，所以就不需要再该方法中使用参数来指定图形大小了；
4）绘制椭圆的方法
context.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise)
radiusX为椭圆的横向半径；radiusY为椭圆的纵向半径；rotation：椭圆顺时针旋转角度；
function draw(id){ var canvas=document.getElementById(id); if (canvas==null) { return false; } var context=canvas.getContext("2d"); context.fillStyle="#EEEEFF"; context.fillRect(0, 0, 400,300); var n=0; for (var i = 0; i <10; i++) { //开始创建路径 context.beginPath(); //绘制圆形 context.arc(i*25, i*25, i*10,0,Math.PI*2,true); //绘制椭圆 // context.ellipse(i*25, i*25, i*10,i*20,30,0,Math.PI*2,true); //图形创建完成关闭路径 context.closePath(); // 设定绘制样式 context.fillStyle='rgba(255,0,0,0.25)'; // 绘制图形 context.fill(); } }圆形 椭圆
5）不关闭路径会怎么样？
如果把以上例子中的开始创建路径和关闭路径两句删除，则会出现以下情况；
在画布中先是绘制一个深红色的半径最小的圆，然后每次半径变大的同时，颜色变淡。
原因：
因为已经创建的路径在绘制完图形后一直存在，通过for循环就相当于图形进行了一次又一次的绘制，第一个圆形实质上绘制了10次，所以图形颜色才会是上图效果；
注意：如果不关闭路径，已经创建的路径会永远保留着，就算用fill方法与stroke方法在页面上将图形已经绘制完毕，路径都不会消失。所以对于路径的何时开何时关要把握好。
2.绘制直线
1）moveTo(x,y) ：将光标移动到指定的坐标点，绘制直线的时候为起点；
2）lineTo(x,y)：在moveTo方法中指定的起点和参数中指定的直线终点之间绘制一条直线；
3）可以使用图形上下文对象的lineCap属性为直线添加线帽：
① butt：默认属性值，不为直线添加线帽；
② round：为直线添加圆形线帽；
③ square：为直线添加正方形线帽；
4）上下文对象的lineJoin属性指定两条直线交汇时的拐角形状；
① miter：默认值，创建尖角拐角；
② round：创建圆角拐角；
③ bevel：创建斜角拐角；
5）setLineDash(数组)自定义绘图时使用的虚线形状；
参数数组用于设置线段长度以及线段与线段之间距离的数值；
① 数组中只有一个数值时，表示线段长度以及线段与线段之间的距离等于该数值；
② 如果数值数量超过2，数组中的数值数量为偶数时，第奇数个数值代表线段长度，第偶数个为线段与线段之间的距离；
③ 如果数组数量大于1，且不为偶数时，浏览器自动数组中数值使得数组数量为偶数倍；
function draw(id){ var canvas=document.getElementById(id); if (canvas==null) { return false; } var context=canvas.getContext("2d"); context.fillStyle="#EEEEFF"; //开始创建路径 context.beginPath(); context.lineWidth=10; //添加圆形帽 context.lineCap="round"; // 设定绘制样式 context.moveTo(20, 20); context.lineTo(200, 20); context.stroke(); context.closePath(); context.beginPath(); context.lineWidth=10; //添加正方形帽 context.lineCap="square"; // 起点 context.moveTo(20, 100); // 直线终点 context.lineTo(200, 100); // 绘制图形 context.stroke(); context.closePath(); context.beginPath(); context.lineWidth=10; // //拐角形状 context.lineJoin="round"; // context.lineJoin="bevel"; context.moveTo(250, 20); context.lineTo(250, 100); context.lineTo(350, 100); context.stroke(); context.closePath(); }
function draw(id){ var canvas=document.getElementById(id); if (canvas==null) { return false; } var context=canvas.getContext("2d"); context.fillStyle="#EEEEFF"; // //设置线段与线段距离15像素 context.beginPath(); context.lineWidth=5; context.setLineDash([5]); context.moveTo(400, 20); context.lineTo(550, 20); context.stroke(); context.closePath(); context.beginPath(); context.lineWidth=5; // 数值量为2个 context.setLineDash([5,10]); context.moveTo(400, 45); context.lineTo(550, 45); context.stroke(); context.closePath(); // 数值量超过2个，且为偶数个 context.beginPath(); context.lineWidth=5; context.setLineDash([5,10,15,20]); context.moveTo(400, 70); context.lineTo(580, 70); context.stroke(); context.closePath(); //数值量大于1，且不为偶数 context.beginPath(); context.lineWidth=5; context.setLineDash([5,10,20]); context.moveTo(400, 100); context.lineTo(580, 100); context.stroke(); context.closePath(); }
