1、Canvas是什么？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2、创建 Canvas 元素

规定元素的 id、宽度和高度：

3、通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); ​cxt.fillStyle="#FF0000"; ​cxt.fillRect(0,0,150,75);

4、通过JavaScript创建canvas

function createCanvas(){document.body.innerHTML = ""mycanvas =document.getElementByIdx("mycanvas");context = mycanvas.getContext("2d");}

5、绘制矩形

function drawRect(){context.fillStyle="#ff0000";context.translate(100,200);//移动context.scale(1,0.5);//缩放context.rotate(30);//旋转context.fillRect(0,0,200,200);}

　　

6、绘制图像

function drawImage(){var img = new Image();img.onload = function(){context.drawImage(img,0,0);//三个参数图片源对象、摆放的位置}img.src = "img/logo.png"}

7、使用Canvas绘制直线

function pageLoad(){    var c= $('mycanvas');    var ctx = c.getContext('2d');    ctx.moveTo(20,30);//第一个起点    ctx.lineTo(120,90);//第二个点    ctx.lineTo(220,60);//第三个点（以第二个点为起点）    ctx.lineTo(250,90);//第四个点（以第二个点为起点）    ctx.lineWidth=3;    ctx.strokeStyle = 'blue';    ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。  }　

8、绘制渐变曲线

function pageLoad2(){   var can = $('mycanvas');   var cans = can.getContext('2d');   cans.moveTo(0,0);   cans.lineTo(400,300);   var grd = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标   grd.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色   grd.addColorStop(0.5,'green');   grd.addColorStop(1,'yellow');   cans.lineWidth=20;   cans.strokeStyle = grd;   cans.stroke();  }

　　

8、绘制一个线性渐变的矩形

function pageLoad2(){   var can = $('mycanvas');   var cans = can.getContext('2d');   cans.moveTo(0,0);   cans.lineTo(400,300);   var grd = cans.createLinearGradient(0,0,0,100);//线性渐变的起止坐标   grd.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色   grd.addColorStop(0.5,'green');   grd.addColorStop(1,'yellow');   cans.fillStyle=grd;   cans.fillRect(0,0,200,100);}