[置顶] HTML5研究之canvas(二)

(3)图像应用 

Canvas 相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是 Gecko支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。

绘制图像：drawImage(image, x, y)

当脚本执行后，图片开始装载。若调用 drawImage 时，图片没装载完，脚本会等待直至装载完毕。如果不希望这样，可以使用onload 事件

代码：

 var img = new Image();  

    img.onload = function(){  

      ctx.drawImage(img,0,0);  

      ctx.beginPath();  

      ctx.moveTo(30,96);  

      ctx.lineTo(70,66);  

      ctx.lineTo(103,76);  

      ctx.lineTo(170,15);  

      ctx.stroke();  

 }  

   img.src = 'images/backdrop.png'; 

缩放: drawImage(image, x, y, width, height)

注意：图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果您的图像里面有文字，那么最好还是不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。

Gecko 1.9.2 引入了 mozImageSmoothingEnabled 属性，值为 false 时，图像不会平滑地缩放。默认是 true 。

ctx.mozImageSmoothingEnabled = false;

切片:drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

(4)运用样式与颜色

ctx.fillStyle = color

ctx.strokeStyle = color

// 这些 fillStyle 的值均为 '橙色'  

ctx.fillStyle = "orange";  

ctx.fillStyle = "#FFA500";  

ctx.fillStyle = "rgb(255,165,0)";  

ctx.fillStyle = "rgba(255,165,0,1)";

线型Line Style

lineWidth = value                value必须为正数

ctx.lineCap = type               type可以为butt,round和square。默认是 butt。对应图示如下

 

 

ctx.lineJoin = type           type可以为round, bevel 和 miter。默认是 miter。对应图示如下

ctx.miterLimit = value      线段的外侧边缘会延伸交汇于一点上。线段直接夹角比较大的，交点不会太远，但当夹角减少时，交点距离会呈指数级增大。miterLimit 属性就是用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel。

 

渐变Gradients

创建canvesGradient对象

var gradient = ctx.createLinearGradient(x1,y1,x2,y2);

createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

var gradient = ctx.createRadiaGradient(x1,y1,r1,x2,y2,r2);

createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

创建完canvesGradient对象后，使用addColorStop方法上色。

gradient.addColorStop(position, color)

addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。

图案Patterns

ctx.createPattern(image,type)

该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

阴影

shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color

shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，他们默认都是 0。

shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。

shadowColor 用于设定阴影效果的延伸，值可以是标准的 CSS 颜色值，默认是全透明的黑色。