HTML5 Canvas

创建一个画布（Canvas）

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个 元素.

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

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

        也许这个2d勾起了大家的无限遐想，但是很遗憾的告诉你html5还只是个少女，不提供3d服务。

   

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

        context.fill()//填充

        context.stroke()//绘制边框

   

    style:在进行图形绘制前，要设置好绘图的样式(绘制完后设置样式，边框颜色等不会生效)

        context.fillStyle//填充的样式

        context.strokeStyle//边框样式

   

    context.lineWidth//图形边框宽度

1，绘制矩形 

 context.fillRect(x,y,width,height) 

 context.strokeRect(x,y,width,height)

实例：

2,清除矩形区域 

context.clearRect(x,y,width,height)

3.圆弧

context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

    x:圆心的x坐标

    y:圆心的y坐标

    straAngle:开始角度

    endAngle:结束角度

    anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针

    ps：经过试验证明书本上ture是顺时针，false是逆时针是错误的，而且无论是逆时针还是顺时针，角度都沿着顺时针扩大

实例

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);

// 不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果

ctx.closePath();

ctx.stroke();

上面的画圆并不单单是直接用arc还用到了context的 beginPath   和closePath方法，

 注意以下几点：*号为重点

    1、系统默认在绘制第一个路径的开始点为beginPath

    *2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制

    3、每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分

    ps：如果没有closePath那么前面的路劲会保留，实验证明正确的结论是 如果没有重新beginPath那么前面的路劲会保留

    ps1：如果你真心凌乱了，那么记住每次画路径都在前后加context.beginPath()   和context.closePath()就行

2点相关实例

无beginPath() closePath()  路径重绘

var c = document.getElementById("myCanvas");
if( c == null ){
    return false;
}
var cxt = c.getContext("2d");

//cxt.beginPath();
cxt.arc(50,50,40,0,Math.PI*2);
cxt.fillStyle = "yellow";
cxt.fill();
//cxt.closePath();

//cxt.beginPath();
cxt.arc(140,50,40,0,Math.PI*2);
cxt.strokeStyle = "green";
cxt.stroke()
//cxt.closePath();

beginPath() closePath()  从最近的beginPath()为起点

var c = document.getElementById("myCanvas");
if( c == null ){
    return false;
}
var cxt = c.getContext("2d");

cxt.beginPath();
cxt.arc(50,50,40,0,Math.PI*2);
cxt.fillStyle = "yellow";
cxt.fill();
cxt.closePath();

cxt.beginPath();
cxt.arc(140,50,40,0,Math.PI*2);
cxt.strokeStyle = "green";
cxt.stroke()
cxt.closePath();

3点相关实例

每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分

cxt.beginPath();
cxt.arc(50,140,40,0,Math.PI/2);
cxt.fillStyle = "yellow";
cxt.fill();
cxt.closePath();

cxt.beginPath();
cxt.arc(140,140,40,0,Math.PI/2);
cxt.strokeStyle = "green";
cxt.stroke()
cxt.closePath();

2，3点结合的较复杂的实例（第二个圆弧的起点与第一个圆弧起点一样，重新绘制，并将起点终点闭合填充）

cxt.beginPath();
cxt.arc(50,50,40,0,Math.PI/2);
cxt.fillStyle = "yellow";
cxt.fill();
//cxt.closePath();

//cxt.beginPath();
cxt.arc(140,50,40,0,Math.PI/2);
cxt.fillStyle = "green";
cxt.fill()
cxt.closePath();

4,绘制文本

重要的属性和方法如下：

• font - 定义字体
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText（）绘制实心文本:

实例

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

使用 strokeText() 绘制空心文本:

实例

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

5,绘制直线

在Canvas上画线，我们将使用以下两种方法：

• moveTo(x,y) 定义线条开始坐标
• lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法，就像stroke().

实例

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

每次画线都从moveTo的点到lineTo的点， 如果没有moveTo那么第一次lineTo的效果和moveTo一样，即没有moveTo作起点就以lineTo作起点

cxt.moveTo(10,10);
cxt.lineTo(50,50);
cxt.lineTo(90,50);
cxt.stroke();

6，渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

• createLinearGradient(x,y,x1,y1) - 创建线条渐变
• createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

线性渐变 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 cxt = c.getContext("2d");
// Create Lineargradient
var grd=cxt.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"red");

// Fill with gradient
cxt.fillStyle=grd;
cxt.fillRect(20,20,200,100);

径向渐变（发散）var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

径向渐变（发散）颜色rg.addColorStop(offset,color)

---

    xStart:发散开始圆心x坐标

    yStart:发散开始圆心y坐标

    radiusStart:发散开始圆的半径

    xEnd:发散结束圆心的x坐标

    yEnd:发散结束圆心的y坐标

    radiusEnd:发散结束圆的半径

 

    offset:设定的颜色离渐变结束点的偏移量(0~1)

    color:绘制时要使用的颜色

var cxt = c.getContext("2d");

 //Create gradient
var grd =cxt.createRadialGradient(100,60,5,100,60,100);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"red");

// Fill with gradient
cxt.fillStyle=grd;
cxt.fillRect(20,20,200,100);

 function draw26(id) {
 2             //同一个圆心画球型
 3             /*var canvas = document.getElementById(id);
 4             if (canvas == null)
 5                 return false;
 6             var context = canvas.getContext('2d');
 7             var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);
 8             g1.addColorStop(0.1, 'rgb(255,0,0)');  
 9             g1.addColorStop(1, 'rgb(50,0,0)');
10             context.fillStyle = g1;
11             context.beginPath();
12             context.arc(200, 150, 100, 0, Math.PI * 2, true);
13             context.closePath();
14             context.fill();*/
15           
16             //不同圆心看径向渐变模型
17             var canvas = document.getElementById(id);
18             if (canvas == null)
19             return false;
20             var context = canvas.getContext('2d');
21             var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50);
22             g1.addColorStop(0.1, 'rgb(255,0,0)');
23             g1.addColorStop(0.5, 'rgb(0,255,0)');
24             g1.addColorStop(1, 'rgb(0,0,255)');
25             context.fillStyle = g1;
26             context.fillRect(0, 0, 400, 300);
27    
28         }

http://blog.csdn.net/clh604/article/details/8536059

http://www.runoob.com/html/html5-canvas.html