HTML5 - Canvas的使用样例13(使用渐变色进行填充)
Canvas支持线性渐变填充,和放射性渐变填充。同时,这两种渐变形式都支持多种颜色混合。
(2)设置渐变颜色,需要使用渐变对象的 addColorStop() 方法。调用这个方法,除了需要提供颜色值(颜色名),还需要提供一个0~1的偏移值。0表示位于渐变的起点,1表示位于渐变的终点。
1,线性渐变
(1)要创建线性渐变,我们需要给 createLinearGradient() 传入两个坐标点,分别表示渐变的起点和终点。起点和终点构成了颜色逐渐过渡的区间。

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); //边框线条宽度 context.lineWidth = 2; //边框线条颜色 context.strokeStyle = "#c0c0c0"; //绘制路径 context.moveTo(200, 50); context.lineTo(100, 150); context.lineTo(300,150); context.closePath(); //创建一个从(150,0)到(250,0)的渐变 var gradient = context.createLinearGradient(150, 0, 250, 0); //添加两种颜色 gradient.addColorStop(0, "magenta"); gradient.addColorStop(1, "yellow"); //填充渐变色 context.fillStyle = gradient; context.fill(); context.stroke();
(2)设置渐变颜色,需要使用渐变对象的 addColorStop() 方法。调用这个方法,除了需要提供颜色值(颜色名),还需要提供一个0~1的偏移值。0表示位于渐变的起点,1表示位于渐变的终点。
通过多次调用 addColorStop() 方法,我们可以创建多种颜色构成的渐变。
2,放射性渐变
(1)要创建放射性渐变,我需要使用 createRadialGradient() 指定两个圆。因为放射性渐变就是颜色从一个小圆过渡到一个更大、包含它的圆。
(2)同样通过多次调用 addColorStop() 方法,可以实现多色放射性渐变效果。

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); //边框线条宽度 context.lineWidth = 2; //边框线条颜色 context.strokeStyle = "#c0c0c0"; //绘制路径 context.moveTo(200, 50); context.lineTo(100, 150); context.lineTo(300,150); context.closePath(); //创建一个从(150,0)到(250,0)的渐变 var gradient = context.createLinearGradient(150, 0, 250, 0); //添加多种颜色 gradient.addColorStop(0, "magenta"); gradient.addColorStop(0.25, "blue"); gradient.addColorStop(0.5, "green"); gradient.addColorStop(0.75, "yellow"); gradient.addColorStop(1, "red"); //填充渐变色 context.fillStyle = gradient; context.fill(); context.stroke();
2,放射性渐变
(1)要创建放射性渐变,我需要使用 createRadialGradient() 指定两个圆。因为放射性渐变就是颜色从一个小圆过渡到一个更大、包含它的圆。

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); //边框线条宽度 context.lineWidth = 2; //边框线条颜色 context.strokeStyle = "#c0c0c0"; //绘制路径 context.moveTo(200, 50); context.lineTo(100, 150); context.lineTo(300,150); context.closePath(); //渐变起点是坐标为(200,100),半径10的圆。终点是相同圆心坐标,半径50的圆 var gradient = context.createRadialGradient(200, 100, 10, 200, 100, 50); //添加两种颜色 gradient.addColorStop(0, "magenta"); gradient.addColorStop(1, "yellow"); //填充渐变色 context.fillStyle = gradient; context.fill(); context.stroke();
(2)同样通过多次调用 addColorStop() 方法,可以实现多色放射性渐变效果。

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); //边框线条宽度 context.lineWidth = 2; //边框线条颜色 context.strokeStyle = "#c0c0c0"; //绘制路径 context.moveTo(200, 50); context.lineTo(100, 150); context.lineTo(300,150); context.closePath(); //渐变起点是坐标为(200,100),半径10的圆。终点是相同圆心坐标,半径50的圆 var gradient = context.createRadialGradient(200, 100, 10, 200, 100, 50); //添加多种颜色 gradient.addColorStop(0, "magenta"); gradient.addColorStop(0.25, "blue"); gradient.addColorStop(0.5, "green"); gradient.addColorStop(0.75, "yellow"); gradient.addColorStop(1, "red"); //填充渐变色 context.fillStyle = gradient; context.fill(); context.stroke();