1、Canvas的基本用法

1、Canvas是什么？

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

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

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

2、创建 Canvas 元素

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

<canvas class="canvas" width="200px" height="200px"></canvas>

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);
}