Html5 Canvas渐变与图片实例教程

渐变

渐变色的使用比之前绘制任意一个图形都简单，而且可以填充到任何绘制的图形上，我们先看一下代码：

这里比较奇特的就是创建的变量可以用一个变量储存，但必须和使用的图形的坐标、大小一模一样，这一点我个人并不是特别能理解，感觉这样就有些局限性，但这么设计肯定是有他的道理的，我们也不用说什么。

PS：配图的渐变略丑，随便弄得~

    createLinearGradient()：创建一个渐变，四个属性分别是 X 坐标、Y 坐标、长和宽，大小和坐标必须和应用的图形完全一样。
    addColorStop()：添加颜色，第一个属性是位置，从 0 到 1，支持小数，第二个属性是颜色，理论可以添加无限密集的渐变。

剩下的都没什么了，创建一个矩形使其颜色为创建的渐变所储存的变量，都是之前学过的。
插入图片

在画布中插入一张图片目前兼容性非常怪异，Chrome 完全不支持，其它浏览器的新版基本都支持，甚至包括 IE，这里我的演示直接用 IE11，没安装其它浏览器。

首先我们 new 一个对象 Image()，然后用 src 指定图片路径，最后后用 drawImage() 方法打印出来。

    drawImage()：打印图片，三个属性分别为：图片地址（一个 Image() 对象，用 src 设置图片路径），X 坐标，Y 坐标。

注意：至此，基本的内容已经完结，下面是更进一步的内容，敬请期待~

这里提供一下本文最后一幅图的代码，也是三节的所有代码：