HTML5 Canvas

Canvas

Canvas标签，用于在web中绘制各种图形。Canvas为基于像素的绘图，绘制的图像是位图。也即Canvas绘图的基本单位是像素。Canvas是一个相当于画板的html节点，用js操作绘图。

 

 

Canvas特点

 

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

 

 

Canvas基础

若浏览器不支持HTML5的 <canvas>标签。则把不支持信息写在<canvas></canvas>之间。

例：

<canvas id="myCanvas" width="600" height="300">你的浏览器还不支持哦</canvas>。

 

<canvas>标签，有两个基本属性：

height 属性	画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 150。
width 属性	画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

 

获取canvas对象

获取canvas对象：var c=document.getElementById("myCanvas"); 

 

获取2d绘图对象（CanvasRenderingContext2D 对象）

这是通过 Canvas 对象的 getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。c.getContext("2d")，获取的2d绘图对象，相当于画笔。

注意：无论调用多少次getContext()方法，获取的对象都都是相同的。

 

canvas 属性

这个环境可以绘制于其上的 Canvas 元素。

1. fillStyle 属性

用来填充路径的当前的颜色、模式或渐变。这个属性可以设置为一个字符串或者一个 CanvasGradient 对象 或 CanvasPattern 对象。当设置为一个字符串时，它被解析为一个 CSS 颜色值并且用来进行实心填充。当设置为一个 CanvasGradient 或 CanvasPattern 对象，通过使用指定的渐变或模式来完成填充。

 

2. globalAlpha 属性

指定在画布上绘制的内容的不透明度。这个值的范围在 0.0（完全透明）和 1.0（完全不透明）之间。默认值为 1.0。

 

3. globalCompositeOperation 属性

指定颜色如何与画布上已有的颜色组合（合成）。如需更多细节，请参阅 globalCompositeOperation 属性参考页。

 

4. lineCap 属性

指定线条的末端如何绘制。合法的值是 "butt"、"round" 和 "square"。默认值是 "butt"。如需更多细节，请参阅 lineCap 属性参考页。

 

5. lineJoin 属性

指定两条线条如何连接。合法的值是 "round"、"bevel" 和 "miter"。默认值是 "miter"。如需更多细节，请参阅 lineJoin 属性参考页。

 

6. lineWidth 属性

指定了画笔（绘制线条）操作的线条宽度。默认值是 1.0，并且这个属性必须大于 0.0。较宽的线条在路径上居中，每边有线条宽的一半。

 

7. miterLimit 属性

当 lineJoin 属性为 "miter" 的时候，这个属性指定了斜连接长度和线条宽度的最大比率。如需更多细节，请参阅 miterLimit 属性参考页。

 

8. shadowBlur 属性

指定羽化阴影的程度。默认值是 0。阴影效果得到 safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。

 

9. shadowColor 属性

把阴影的颜色指定为一个 CSS 字符串或 Web 样式字符串，并且可以包含一个 alpha 部分来表示透明度。默认值是 black。阴影效果得到 Safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。

 

10. shadowOffsetX, shadowOffsetY 属性

指定阴影的水平偏移和垂直偏移。较大的值使得阴影化的对象似乎漂浮在背景的较高位置上。默认值是 0。阴影效果得到 Safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。

 

11. strokeStyle 属性

指定了用于画笔（绘制）路径的颜色、模式和渐变。这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。

 

 

 

2：绘图对象的绘图方法：

绘制路径

beginPath() ：beginPath() 丢弃当前定义的路径，开始一条新的路径。

closePath() ：绘制路径结束，它会绘制一个闭合的区间，添加一条起始位置到当前坐标的闭合曲线。

moveTo(x,y) ：设置绘图起始坐标。

lineTo(x,y) ：从最后一点到点(x,y)绘制一条直线。

arc(x,y,radius,startAngle,endAngle,anticlockwise) ：绘制中心点在(x,y)的弧，半径为radius，角度在[startAngle,endAngle]之间（角度单位为弧度）。anticlockwise为布尔类型，若为true表示逆时针；若为false表示顺时针。

arcTo(x1, y1, x2, y2, radius) ：创建两切线之间的弧/曲线。圆弧是半径为radius的圆的部分。该圆弧有一个点与当前位置到P1(x1,y1)的线段相切，还有一个点和从P1(x1,y1)到P2(x2,y2)的线段相切。这两个切点就是圆弧的起点和终点，圆弧绘制的方向就是连接这两个点的最短圆弧的方向。

 

bezierCurveTo(c1x,c1y,c2x,c2y,x,y) ：使用控制点(c1x,c2y)和(c2x,c2y)从最后一点到点(x,y)绘制一条三次贝塞尔曲线。

quadraticCurveTo(cx,cy,x,y) ：控制点(cx,cy)从最后一点到点(x,y)，绘制一条贝塞尔曲线。

rect(x,y,width,height) ：为当前路径添加一条矩形路径。矩形是路径的一个子路径，没有和路径中的任何其他子路径相连。当 rect() 方法返回时，当前位置是 (0,0)。

stroke() ：渲染路径。

 

 

说明：

1. 绘制路径后，调用stroke()方法对路径描边。 

2. 调用closePath()，表示路径闭合。如果路径已经闭合，可以调用fill()方法用fillStyle填充它。

3. 调用clip(),根据路径创建一个剪裁区域。

4. isPointInPath(x,y) 判断路径是否存在于路径之上。该方法在路径关闭之前调用。

 

 

绘制矩形

clearRect(left,top,width,height) ：清除指定的矩形区域。

strokeRect(left,top,width,height) ：绘制矩形框。无填充色。框的颜色由strokeStyle属性指定。strokeStyle属性默认为黑色('#000000')。

fillRect(left,top,width,height) ：绘制内部填充颜色的矩形。填充颜色由fillStyle属性指定。fillStyle属性默认为黑色('#000000')。

 

 

绘制文本

文本绘制API不一定在浏览器中有实现。

绘制文本的context属性

font

textAlign

textBaseline

 

fillText(text,x,y,) ：绘制实心文字。

stokeText(text,x,y,) ：绘制空心文字。

fill()，stroke()，clip()：在完成绘制的最后的填充和边界轮廓，剪辑区域。

 

 

使用图片

使用drawImage() 方法可以把图片绘制到画布上。该方法有有3个变形。

drawImage(image, x, y) ：把整个图像复制到画布，将其放置到指定点的左上角，并且将每个图像像素映射到画布上。

drawImage(image, x, y, width, height) ：把整个图像复制到画布，允许指定图像的宽度和高度。

drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) ：指定图像的任何矩形区域，对画布中的任何位置都可进行任何的缩放。

 

参数说明：

image 所要绘制的图像。这必须是表示 <img> 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。

x, y 要绘制的图像的左上角的位置。

width, height 图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。

sourceX, sourceY 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。

sourceWidth, sourceHeight 图像所要绘制区域的大小，用图像像素表示。

destX, destY 所要绘制的图像区域的左上角的画布坐标。

destWidth, destHeight 图像区域所要绘制的画布大小。

 

 

坐标变换

2D绘图环境支持所有基本绘图变换。当创建绘图环境，变换矩阵便已经初始化了默认值。

 

translate(dx,dy) ：平移变换。将画布按向量(dx,dy)平移。也即将原点移动到坐标(dx,dy)。

rotate(a) ：旋转变换，画布绕原点旋转a弧度角。

scale(scaleX,scaleY) ：缩放图像，x轴放大scaleX，y轴放大scaleY。scaleX，scaleY默认都为1.0。

 

 

高级变换

transform(m1_1,m1_2,m2_1,m2_2,dx,dy) ：将变换矩阵乘以以下矩阵。

m1_1	m1_2	dx
m2_1	m2_2	dy
0	0	1

 

setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy) ：重置变换矩阵到默认状态，然后调用transform()。

 

 

平移 ：context.translate(dx,dy)可以使用context.transform (1,0,0,1,dx,dy)或者context.transform(0,1,1,0.dx,dy)代替。

旋转 ：context.rotate(a)可以使用context.transform(Math.cos(a*Math.PI/180),Math.sin(a*Math.PI/180),-Math.sin(a*Math.PI/180),Math.cos(a*Math.PI/180),0,0)或者

context.transform(-Math.sin(a*Math.PI/180),Math.cos(a*Math.PI/180),Math.cos(a*Math.PI/180),Math.sin(a*Math.PI/180), 0,0)代替。

缩放 ：context.scale(sx, sy)可以使用context.transform(sx,0,0,sy,0,0)或者context.transform(0,sy,sx,0, 0,0)代替。

 

 

 

保存图形状态

save() 和 restore() 方法允许你保存和恢复一个 CanvasRenderingContext2D 对象的状态。save() 把当前状态推入到栈中，而 restore() 从栈的顶端弹出最近保存的状态，并且根据这些存储的值来设置当前绘图状态。

CanvasRenderingContext2D 对象的所有属性（除了画布的属性是一个常量）都是保存的状态的一部分。变换矩阵和剪切区域也是这个状态的一部分，但是当前路径和当前点并不是。

 

操作像素

createImageData

getImageData

putImageData

 

ImageData对象保存了图像像素值。每个对象有三个属性: width, height 和data。data 属性类型为CanvasPixelArray，用于储存width*height*4个像素值。每一个像素有RGB值和透明度alpha值(其值为 0 至255，包括alpha在内!)。像素的顺序从左至右，从上到下，按行存储。

 

渐变

Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象，这两个方法的原型如下：

 

Object createLinearGradient(x1, y1, x2, y2) ：创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。

 

Object createRadialGradient(x1, y1, r1, x2, y2, r2) ：创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。

 

渐变对象创建完成之后必须使用它的addColorStop()方法来添加颜色，该方法的原型如下：

 

void addColorStop(position, color) ：其中position表示添加颜色的位置，取值范围为[0, 1]，0表示起点，1表示终点；color表示添加的颜色，取值可以是任何CSS颜色值。

渐变对象创建并配置完成之后就可以将其赋予Context对象的strokeStyle属性或者fillStyle属性，然后绘制的图形就具有了所需的渐变效果。