Html5 Canvas渐变与图片实例教程

时间：2022-06-25 18:23:53 编辑：袖梨来源：一聚教程网

渐变

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

代码如下	复制代码
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，没安装其它浏览器。

代码如下	复制代码
var img = new Image(); img.src = "logo.png"; myCanvas.drawImage(img, 50, 50);

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

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

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

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

代码如下	复制代码
Html5 - canvas 演示 \| 斌果博客