Html5 Canvas渐变与图片实例教程
作者：袖梨
2022-06-25
渐变
渐变色的使用比之前绘制任意一个图形都简单，而且可以填充到任何绘制的图形上，我们先看一下代码：
| 代码如下 | 复制代码 |
| var grd = myCanvas.createLinearGradient(100, 100, 175, 50); grd.addColorStop(0, "#FAFAFA"); grd.addColorStop(0.5, "red"); grd.addColorStop(0.75, "blue"); grd.addColorStop(1, "#000"); myCanvas.fillStyle = grd; myCanvas.fillRect(100, 100, 175, 50); |
|
这里比较奇特的就是创建的变量可以用一个变量储存，但必须和使用的图形的坐标、大小一模一样，这一点我个人并不是特别能理解，感觉这样就有些局限性，但这么设计肯定是有他的道理的，我们也不用说什么。
PS：配图的渐变略丑，随便弄得~
createLinearGradient()：创建一个渐变，四个属性分别是 X 坐标、Y 坐标、长和宽，大小和坐标必须和应用的图形完全一样。
addColorStop()：添加颜色，第一个属性是位置，从 0 到 1，支持小数，第二个属性是颜色，理论可以添加无限密集的渐变。
剩下的都没什么了，创建一个矩形使其颜色为创建的渐变所储存的变量，都是之前学过的。
插入图片
在画布中插入一张图片目前兼容性非常怪异，Chrome 完全不支持，其它浏览器的新版基本都支持，甚至包括 IE，这里我的演示直接用 IE11，没安装其它浏览器。
| 代码如下 | 复制代码 |
|
|
|
首先我们 new 一个对象 Image()，然后用 src 指定图片路径，最后后用 drawImage() 方法打印出来。
drawImage()：打印图片，三个属性分别为：图片地址（一个 Image() 对象，用 src 设置图片路径），X 坐标，Y 坐标。
注意：至此，基本的内容已经完结，下面是更进一步的内容，敬请期待~
这里提供一下本文最后一幅图的代码，也是三节的所有代码：
| 代码如下 | 复制代码 |
|
|
|
