HTML5新特性之Canvas

1、概念

canvas标签

相当于是一块画布（var canvas = document.getElementById("myCanvas");）

getContext(“2d”)

canvas标签是画布，那么在这块画布上面绘制各式各样图片文字等等的工具是什么？就是canvas标签的一个方法getContext(“2d”), 它返回一个对象，这个对象也叫画布的“上下文”，这个对象提供了各种属性和方法，用来在画布上绘制文本、线条、矩形、图形等等。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContenxt("2d");

2、来实现一个效果

canvas效果三板斧：落笔ctx.moveTo(x, y) --> 连线ctx.lineTo(x, y) --> 描边ctx.stroke()

来绘制一个三角形：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContenxt("2d");
ctx.moveTo(50, 50); //起始坐标50，50
ctx.lineTo(50, 200);
ctx.lineTo(200, 200);
ctx.lineTo(50, 50);
ctx.lineWidth = 2;
ctx.stroke();  //描边

效果图：

3、getContext(“2d”)对象的属性和方法列表

3.1 颜色、样式和阴影的属性和方法

• fillStyle：设置或返回用于填充绘画的颜色、渐变或模式
• strokeStyle：设置或返回用于笔触的颜色、渐变或模式
• shadowColor：设置或返回用于阴影的颜色
• shadowBlur：设置或返回用于阴影的模糊级别
• shadowOffsetX：设置或返回阴影与形状的水平距离
• shadowOffsetY：设置或返回阴影与形状的垂直距离

---

• createLinearCradient()：创建线性渐变（用在画布内容上）
• createPattern()：在指定的方向上重复指定的元素
• createRadialGradient()：创建放射/环形的渐变（用在画布内容上）
• addColorStop()：规定渐变对象中的颜色和停止位置(通常配合createLinearCradient()和createRadialGradient()使用)

3.2 线条样式

• lineCap：设置或返回线条的结束端点样式。值类型有butt(默认，向线条的每个末端添加平直的边缘)；round(向线条的每个末端添加圆形线帽)；square(向线条的每个末端添加正方形线帽)
• lineJoin：设置或返回两条线相交时，所创建的拐角类型。值类型有bevel(斜角)；round(圆角)；miter(默认，尖角)
• lineWidth：设置或返回当前的线条宽度
• miterLimit：设置或返回最大斜接长度, 和lineJoin的miter配合使用

3.3 矩形相关方法

• rect()：创建矩形，配合stroke()和fill()使用。rect()+stroke()等效于strokeRect()；rect()+fill()等效于fillRect()