本文介绍了如何在HTML5的Canvas元素中使用JavaScript创建线性渐变，包括水平和垂直方向，并通过`addColorStop`方法添加颜色停止点，展示了如何填充和描边矩形区域以应用渐变效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>渐变</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"> 您的浏览器不支持canvas </canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// createLinearGradient(x1, y1, x2, y2)
// x1 y1 渐变开始点的坐标 x2 y2是渐变结束点的坐标
// var gradient = ctx.createLinearGradient(0, 0, 100, 0); // 水平渐变 y值不变, x由0->100
var gradient = ctx.createLinearGradient(0, 0, 0, 100); // 垂直渐变, x值不变, y由0->100
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 150, 80);
ctx.strokeStyle = gradient;
ctx.strokeRect(10, 200, 150, 80);
</script>
</body>
</html>上述运行结果：
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
