在canvas中插入图片，渐变_H5之家 - 中国HTML5教程资源分享第一站

2.2.9　在canvas中插入图片

在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修改图片等，并且图片通常会成为canvas上的焦点。用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容。

不过，图片增加了canvas操作的复杂度：必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上，那么canvas将不会显示任何图片。因此，开发人员要特别注意，在呈现之前，应确保图片已经加载完毕。

我们的示例将加载一张树皮纹理的图片作为树干以供canvas使用。为保证在呈现之前图片已完全加载，我们提供了回调，即仅当图像加载完成时才执行后续代码，如代码清单2-14所示。

代码清单2-14　加载图像

// 加载图片bark.jpg

var bark = new Image();

bark.src = "bark.jpg";

// 图片加载完成后，将其显示在canvas上

bark.onload = function () {

drawTrails();

}

复制代码

从上面的代码中可以看到，我们为bark.jpg图片添加了onload处理函数，以保证仅在图像加载完成时才调用主drawTrails函数。这样做可以保证后续的调用能够把图片正常显示出来，如代码清单2-15所示。

代码清单2-15　在canvas上显示图像

// 用背景图案填充作为树干的矩形

context.drawImage(bark, -5, -50, 10, 50);

复制代码

在这段代码里，我们用纹理贴图替换了之前调用fillRect函数的填充来作为新的树干。尽管替换的动作很小，但canvas上显示出来的树干更有质感。注意，在drawImage函数中，除了图片本身外，还指定了x、y、width和height参数。这些参数会对贴图进行调整以适应预定的10×50像素树干区域。我们还可以把原图的尺寸传进来，以便在裁切区域内对图片进行更多控制。
在图2-12中可以看到，同之前用矩形填充的方式相比，树干的变化不大。

2013-5-30 23:07:42 上传

下载附件 (8.79 KB)

图2-12　使用了树干贴图的树

2.2.10　渐变

对树干还是不满意？其实我也是。我们使用另一种可以让树干变得稍微好看点的绘制方法：渐变。渐变是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。使用渐变需要三个步骤：

(1) 创建渐变对象；
(2) 为渐变对象设置颜色，指明过渡方式；
(3) 在context上为填充样式或者描边样式设置渐变。

可以将渐变看做是颜色沿着一条线进行缓慢地变化。例如，如果为渐变对象提供了A、B两个点，不论是绘制还是填充，只要从A移动到B，都会带来颜色的变化。

要设置显示哪种颜色，在渐变对象上使用addColorStop函数即可。这个函数允许指定两个参数：颜色和偏移量。颜色参数是指开发人员希望在偏移位置描边或填充时所使用的颜色。偏移量是一个0.0到1.0之间的数值，代表沿着渐变线渐变的距离有多远。
假如要建立一个从点(0,0)到点(0,100)的渐变，并指定在0.0偏移位置使用白色，在1.0偏移位置使用黑色。当使用绘制或者填充的动作从(0,0)画到(0,100)后，就可以看到颜色从白色（起始位置）渐渐转变成了黑色（终止位置）。

除了可以变换成其他颜色外，还可以为颜色设置alpha值（例如透明），并且alpha值也是可以变化的。为了达到这样的效果，需要使用颜色值的另一种表示方法，例如内置alpha组件的CSS rgba函数。

下面我们通过示例来详细了解如何使用两个渐变来填充（相应的函数为fillRect）矩形区域，并形成最终的树干，见代码清单2-16。

代码清单2-16　使用渐变

// 创建用作树干纹理的三阶水平渐变

var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);

// 树干的左侧边缘是一般程度的棕色

trunkGradient.addColorStop(0, '#663300');

// 树干中间偏左的位置颜色要淡一些

trunkGradient.addColorStop(0.4, '#996600');

// 树干右侧边缘的颜色要深一些

trunkGradient.addColorStop(1, '#552200');

// 使用渐变色填充树干

context.fillStyle = trunkGradient;

context.fillRect(-5, -50, 10, 50);

// 接下来，创建垂直渐变，以用作树冠在树干上投影

var canopyShadow = context.createLinearGradient(0, -50, 0, 0);

// 投影渐变的起点是透明度设为50%的黑色

canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');

// 方向垂直向下，渐变色在很短的距离内迅速渐变至完全透明，

这段长度之外的树干上没有投影

canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');

// 在树干上填充投影渐变

context.fillStyle = canopyShadow;

context.fillRect(-5, -50, 10, 50);

复制代码

如图2-13所示，使用了两个渐变后，最终绘制出来的树干有了平滑的光照效果。现在，树干看起来更平滑，同时树干上也有了轻微的阴影效果。我们把这幅图保存起来吧。