canvas教程

1.html5用于绘制图像（通过脚本JavaScript）

2.浏览器支持

IE9+,及现代浏览器

3.demo及属性

var ctx=document.getElementById("myCanvas");

var ctx=c.getContext("2d");  // 建立上下文元素

fillStyle属性-填充色   ctx.fillStyle="#0000ff";  值可以是css颜色，渐变，或图案，默认设置为#000000（黑色）

方法：

ctx.beginPath() // 开始一条新路径

ctx.moveTo(x,y) // 从（x,y）开始定义一条新的子路径

ctx.lineTo(x,y) // 绘制一条线段

ctx.fillRect(x,y,width,height) // 定义了矩形当前的填充方式

ctx.arc(x,y,r,start,stop) // 定义了绘制圆形； (x,y)表示绘制圆形的中心点坐标

例：

var c = document.getElementById("canvas");

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

ctx.beginPath();

ctx.arc(95,40,40,0,2*Math.PI);

ctx.stroke();

---

canvas-文本

绘制文本，属性及方法

font - 定义字体       ctx.font = "30px Arial";

fillText(text,x,y) - 在canvas上绘制实心的文本       ctx.fillText("Hello word",10,50)

strokeText(text,x,y) - 在canvas上绘制空心的文本  ctx.strokeText("Hello word",10,50)

---

canvas-渐变

渐变可以填充在矩形，圆形，线条，文本等，两种方式设置canvas渐变

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

使用渐变对象，必须使用两种或两种以上的停止颜色；

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1；

// 创建渐变

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"blue");

// 填充渐变

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,100)

---

canvas - 图像

drawImage(image,x,y)