HTML5之5__Canvas:渐变

来源：动视网责编：小采时间：2020-11-27 15:12:42

HTML5之5__Canvas:渐变

HTML5之5__Canvas:渐变:渐变 Gradient 是一种绘图方式，它应用于颜色上,使用渐变需要三个步骤:1. 创建渐变对象2. 为渐变对象设置颜色，即使用 addColorStop()函数，指明过渡方式, addColorStop 函数允许指定两个参数: 颜色和偏移量，颜色参数是指开发人员希望在偏移位置描边或

推荐度：

点击下载本文 文档为doc格式

导读HTML5之5__Canvas:渐变:渐变 Gradient 是一种绘图方式，它应用于颜色上,使用渐变需要三个步骤:1. 创建渐变对象2. 为渐变对象设置颜色，即使用 addColorStop()函数，指明过渡方式, addColorStop 函数允许指定两个参数: 颜色和偏移量，颜色参数是指开发人员希望在偏移位置描边或

渐变 Gradient 是一种绘图方式，它应用于颜色上,

使用渐变需要三个步骤:

1. 创建渐变对象

2. 为渐变对象设置颜色，即使用 addColorStop()函数，指明过渡方式, addColorStop 函数允许指定两个参数: 颜色和偏移量，颜色参数是指开发人员希望在偏移位置描边或填充时所使用的颜色。偏移量是一个0.0 到 1.0 之间的数值，代表沿着渐变线渐变的距离有多远.

3. 在context 上为填充样式或者描边样式设置渐变。

可以将渐变看作是颜色沿着一条线进行缓慢地变化.

请看代码

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
 <title>渐变</title>

 <canvas id="trails" style="border: 1px solid;" width="400" height="400"> </canvas>
 <script>
 var gravel = new Image();
 gravel.src = "gravel.jpg";
 gravel.onload = function () {
 drawTrails();
 }

 function createCanopyPath(context) {
 context.beginPath();
 context.moveTo(-25, -50);
 context.lineTo(-10, -80);
 context.lineTo(-20, -80);
 context.lineTo(-5, -110);
 context.lineTo(-15, -110);

 context.lineTo(0, -140);

 context.lineTo(15, -110);
 context.lineTo(5, -110);
 context.lineTo(20, -80);
 context.lineTo(10, -80);
 context.lineTo(25, -50);
 context.closePath();
 }

 function drawTrails() {
 var canvas = document.getElementById('trails');
 var context = canvas.getContext('2d');

 context.save();
 context.translate(130, 250);

 // 创建用作树干纹理的三阶水平渐变
 var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);

 // The beginning of the trunk is medium brown
 trunkGradient.addColorStop(0, '#663300');

 // 树干中间偏左的位置颜色要淡一些
 trunkGradient.addColorStop(0.4, '#996600');

 // 树干右侧边缘的颜色要深一些
 trunkGradient.addColorStop(1, '#552200');

 // 使用渐变色填充树干
 context.fillStyle = trunkGradient;
 context.fillRect(-8, -50,15, 100);
 //然后，创建垂直渐变，以用作树冠在树干上投影
 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);

 createCanopyPath(context);

 context.lineWidth = 4;
 context.lineJoin = 'round';
 context.strokeStyle = '#663300';
 context.stroke();

 context.fillStyle = '#339900';
 context.fill();

 context.restore();
 }

 </script>
</html>