关于HTML5 新增标签canvas详解

概述

  canvas是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图

基本知识

##context:是一个封装了很多绘图功能的对象，获取这个对象的方法是

var context =canvas.getContext("2d");

##canvas元素绘制图像的时候有两种方法，分别是

 context.fill()//填充
 context.stroke()//绘制边框

##style:在进行图形绘制前，要设置好绘图的样式

context.fillStyle//填充的样式
context.strokeStyle//边框样式
context.lineWidth//图形边框宽度

图形绘制

##绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
x:矩形起点横坐标（坐标原点为canvas的左上角，当然确切的来说是原始原点）
y:矩形起点纵坐标
width:矩形长度
height:矩形高度

		var canvas = document.getElementById(id)
 3      var context = canvas.getContext("2d");
 6      context.fillRect(0, 0, 100, 100);//默认填充黑色
 8      context.strokeRect(120, 0, 100, 100);//默认边框黑色
 
10 		context.fillStyle = "red";
13      context.strokeStyle = "blue";
14      context.fillRect(0, 120, 100, 100);//填充蓝色
15      context.strokeRect(120, 120, 100, 100);//边框蓝色

		context.fillStyle = "rgba(255,0,0,0.2)";
19      context.strokeStyle = "rgba(255,0,0,0.2)";
20      context.fillRect(240,0 , 100, 100);//加透明度的颜色
21      context.strokeRect(240, 120, 100, 100);//加透明度的颜色

##清除画布
context.clearRect(x,y,width,height);
x:清除矩形起点横坐标
y:清除矩形起点纵坐标
width:清除矩形长度h
height:清除矩形高度

##绘制圆弧
有两个方法可以绘制圆弧：

1.arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。

注意：
这里的度数都是弧度。
0 弧度是指的 x 轴正方向。

var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
    ctx.stroke();

2.arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

 var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
    ctx.stroke();
 
    ctx.beginPath();
    ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
    ctx.closePath();
    ctx.stroke();
 
    ctx.beginPath();
    ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
    ctx.fill();
 
    ctx.beginPath();
    ctx.arc(150, 150, 40, 0, Math.PI, false);
    ctx.fill();

##绘制贝塞尔曲线
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。

一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如 PhotoShop 等。在 Flash4 中还没有完整的曲线工具，而在 Flash5 里面已经提供出贝塞尔曲线工具。

贝塞尔曲线于 1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau 于 1959 年运用 de Casteljau 演算法开发，以稳定数值的方法求出贝兹曲线。

//获取画布
    var canvas = document.getElementsByTagName("canvas")[0];
    //宽高
    var w = 500;
    var h = 500;
    var num=0;
    canvas.width = w;
    canvas.height = h;
    //获取画笔
    var ctx = canvas.getContext('2d');
    //偏移
    var offset = 0;
    setInterval(function(){
    //清除
    ctx.clearRect(0,0,w,h)
    ctx.beginPath();
    ctx.moveTo(0+offset-500,h/2);
    //抖动

    ctx.quadraticCurveTo(w/4+offset-500,h/2-Math.sin(num)*120,w/2+offset-500,h/2);
    ctx.quadraticCurveTo(w/4*3+offset-500,h/2+Math.sin(num)*120,w+offset-500,h/2);

    ctx.moveTo(0+offset,h/2);
    ctx.quadraticCurveTo(w/4+offset,h/2-Math.sin(num)*120,w/2+offset,h/2);
    ctx.quadraticCurveTo(w/4*3+offset,h/2+Math.sin(num)*120,w+offset,h/2);

    offset +=1;
    offset %=500;
    num +=0.1;
    ctx.stroke();
    },1000/30)

是一个动态的贝塞尔曲线图
##线性渐变
线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)
线性渐变颜色lg.addColorStop(offset,color)

xstart:渐变开始点x坐标
ystart:渐变开始点y坐标
xEnd:渐变结束点x坐标
yEnd:渐变结束点y坐标
offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色

 var canvas = document.getElementById(id);
 3             if (canvas == null)
 4                 return false;
 5             var context = canvas.getContext('2d');
 6             var g1 = context.createLinearGradient(0, 0, 0, 300);
 7 
 8             g1.addColorStop(0, 'rgb(255,0,0)'); //红  
 9             g1.addColorStop(0.5, 'rgb(0,255,0)');//绿
10             g1.addColorStop(1, 'rgb(0,0,255)'); //蓝
11 			   context.fillStyle = g1;
14  		   context.fillRect(0, 0, 400, 300);  

##径向渐变（发散）var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
径向渐变（发散）颜色rg.addColorStop(offset,color)
xStart:发散开始圆心x坐标
yStart:发散开始圆心y坐标
radiusStart:发散开始圆的半径
xEnd:发散结束圆心的x坐标
yEnd:发散结束圆心的y坐标
radiusEnd:发散结束圆的半径

##图形变形
1、平移context.translate(x,y)

x:坐标原点向x轴方向平移x

y:坐标原点向y轴方向平移y

2、缩放context.scale(x,y)

x:x坐标轴按x比例缩放

y:y坐标轴按y比例缩放

3、旋转context.rotate(angle)
angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样）