canvas之渐变
Posted 前端技术博文
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas之渐变相关的知识，希望对你有一定的参考价值。
渐变 Gradients
可以用线性或者径向的渐变来填充或描边赋给图形的 fillStyle 或 strokeStyle 属性。
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
使用渐变对象，必须使用两种或两种以上的停止颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x1, y1, x2, y2) 创建线性渐变
接受 4 个参分别表示渐变的起点 (x1,y1) 与终点 (x2,y2)。createRadialGradient(x1, y1, r1, x2, y2, r2) 创建一个径向/圆渐变
接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
示例：
var lineargradient = ctx.createLinearGradient(0,0,150,150);
var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);
上色：
gradient.addColorStop(position, color)
addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)）。
示例：线性渐变
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.getContext("2d");
// 创建线性渐变
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "red");
// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
}
draw();
</script>
示例：径向渐变
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.getContext("2d");
// 创建径向渐变
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "red");
// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
}
draw();
</script>
参考：路径-CanvasAPI|MDN：https://link.jianshu.com/?t=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FCanvas_API
以上是关于canvas之渐变的主要内容，如果未能解决你的问题，请参考以下文章