渐变填充色,包含至少两种颜色。图形的一部分以一种颜色开始,然后渐渐地变成另一种颜色,在其变化过程中,会经历一种或多种预定义的颜色。
canvas 支持两种渐变填充:线性渐变 或 放射性渐变。
线性渐变填充:渐变色在一条直线上从一个点延伸到另一个点。使用 context.createLinearGradient( x1, y1, x2, y2 ) 方法将沿着点(x1, y1)与点(x2, y2)之间的直线填充渐变色。
放射性渐变填充:从你指定的空间的中心开始向各个方向扩散,从而创建出一个圆形。渐变从圆心开始到圆的边缘结束。
context.createRadialGradient( x1, y1, r1, x2, y2, r2 ) 方法以两个圆形作为参数,每个圆形由其圆心坐标和半径指定。
为了实现渐变填充,在渐变过程中,需要至少两种不同的颜色。在仅有两种颜色的情况下,填充的图形会从第一种颜色慢慢地变成第二种颜色。
如果加入更多的中间颜色,填充的图形就会自然地从第一种颜色变到第二种颜色,再到第三种颜色,以此类推,直到变成最终的颜色。
在设置颜色的同时,还需为每种颜色指定它们的位置,该值是介于 0 ~ 1 之间的小数,称为填充的比例。
比如,在两种颜色的填充中,分别指定0和1作为比例。
而在一个等距的三色渐变中则会使用 0、0.5 与 1 作为填充比例,0.5 表示第二种颜色恰好位于第一种颜色和最后一种颜色的中间位置。如果填充比例设置为 0、0.1 与 1的话,第一种颜色就会很快变为第二种颜色,再慢慢变成最后一种颜色。这里的数值不是表示像素值,而是与 1 的比率。
以颜色和比例值作为参数,可以使用 Gradient 对象的 Gradient.addColorStop( ratio, color ) 方法为渐变色添加颜色:
let gradient = context.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0, "#ffffff");
gradient.addColorStop(1, "#ff0000");
以上代码在点(0,0)至点(100,100)之间创建一种线性渐变色,并定义两种颜色以及各自的比例,该渐变色将从白色渐变为红色。
然后将该渐变色赋值给 context.fillStyle 属性,并使用它绘制一个图形:
context.fillStyle = gradient;
context.fillRect(0, 0, 100, 100);
下面代码实现 线性渐变 和 放射性渐变 如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width">
<title></title>
<style>
*{margin: 0;padding: 0}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
<script>
(function(){
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(e){
return !!e.getContext;
}
function canvasApp(){
var myCanvas = document.getElementById("myCanvas");
if(!canvasSupport(myCanvas)){
return ;
}
// start
var context = myCanvas.getContext("2d");
drawScreen(myCanvas, context);
}
// write your codes
function drawScreen(myCanvas, context){
// 线性渐变填充
let pt1 = {
x: 10,
y: 10
};
let pt2 = {
x: 100,
y: 100
};
let gradient = context.createLinearGradient(pt1.x, pt1.y, pt2.x, pt2.y);
gradient.addColorStop(0, "#ffffff");
gradient.addColorStop(0.3, "#0000ff");
gradient.addColorStop(1, "#ff0000");
context.fillStyle = gradient;
context.fillRect(pt1.x, pt1.y, pt2.x, pt2.y);
// 放射性渐变填充
let c1 = {
x: 200,
y: 60,
radius: 0
};
let c2 = {
x: 200,
y: 60,
radius: 50
};
let gradient2 = context.createRadialGradient(c1.x, c1.y, c1.radius, c2.x, c2.y, c2.radius);
gradient2.addColorStop(0, "#ffffff");
gradient2.addColorStop(0.3, "#0000ff");
gradient2.addColorStop(1, "#ff0000");
context.fillStyle = gradient2;
context.fillRect(c1.x - c2.radius, c2.y - c2.radius, c2.radius * 2, c2.radius * 2);
}
})();
</script>
</body>
</html>