Html5 Canvas渐变与图片实例教程-百分百源码网

Html5 Canvas渐变与图片实例教程

发布时间：01/15 来源：浏览：关键词：

继续上一篇文章，之前我们已经说了矩形、直线和圆的基本绘制方法，今天我们不再绘制新图形，而是渐变色的使用和插入一张图片

渐变

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

代码如下
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 坐标。

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

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

代码如下

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Html5 - canvas 演示 | 斌果博客</title>
<script type="text/javascript">
  window.onload = function(){
   //获取 canvas 标签并建立图形
   var myCanvas = document.getElementById('myCanvas').getContext("2d");

   //绘制两个矩形
   myCanvas.fillStyle = 'blue';
   myCanvas.fillRect(320, 100, 310, 110);
   myCanvas.fillStyle = 'rgba(0, 0, 0, 0.5)';
   myCanvas.fillRect(280, 80, 310, 110);

   //绘制直线
   myCanvas.lineWidth = 5;//线条宽度
   myCanvas.strokeStyle = 'rgba(0, 0, 225, 1)';//线条颜色
   myCanvas.moveTo(20, 20);//设置起点
    myCanvas.lineTo(50, 50);//设置节点，下同
    myCanvas.lineTo(70, 85);
    myCanvas.lineTo(90, 300);
    myCanvas.lineTo(500, 300);
    myCanvas.lineTo(520, 85);
    myCanvas.lineTo(540, 50);
    myCanvas.lineTo(560, 20);
   myCanvas.stroke();//结束

   //绘制圆形
   myCanvas.fillStyle = "red";//声明颜色
   myCanvas.beginPath();//从新绘制，防止冲突
   myCanvas.arc(200, 200, 60, 0, Math.PI * 2 , true);//绘制
   myCanvas.closePath();//结束，对应 beginPath()
   myCanvas.fill();//结束渲染

   //渐变
   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);

   //插入图形
   var img = new Image();
   img.src = "logo.png";
   myCanvas.drawImage(img, 50, 50);
  }
</script>
<style>
  #myCanvas{border:2px solid #E5E5E5;background:#FAFAFA;}
</style>
</head>
<body>
<canvas id="myCanvas" width="800px" height="400px;">抱歉，您的浏览器不支持此功能，请下载最新版的 Chrome</canvas>
</body>
</html>