本文主要包含HTML5，Canvas，渐变等相关知识,匿名希望在学习及工作中可以帮助到您
渐变 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>
除了上述的线性渐变以外， canvas 还支持 放射性渐变，即颜色会介于两个指定圆间的锥形区域平滑变化。
方法为 createRaddialGraddient(x0,y0, r0, x1, y1, r1); 共有 6个参数，前3个参数代表以(x0, y0) 为圆心，r0 为半径的圆， 后3个参数 代表以(x1, y1) 为圆心，r1为半径的另一个圆，渐变会在两个圆中间的区域出现.
附件，图片 gravel.jpg
以上就是HTML5之5 __Canvas: 渐变的内容，更多相关内容请关注微课江湖（）！