渐变是指在填充时从一种颜色慢慢过渡到另外一种颜色.
1. 绘制线性渐变, 需要使用 LinearGradient 对象. 使用图形上下文对象的 createLinearGradient 方法创建该对象. context.creatLinearGradient(xStar,yStar,xEnd,yEnd)
xStar 为渐变起始地点的横坐标, yStar 为渐变起始地点的纵坐标, xEnd 为渐变结束地点的横坐标, yEnd 为渐变结束地点的纵坐标. 通过使用 creatLinearGradient 方法, 创建一个使用两个坐标点的 LInearGradient 对象. 然后设置渐变颜色, 使用 addColorStop 方法进行设定.
context.addColorStop(offset,color).offset 为所设定的颜色离开渐变起始点的偏移量. 该参数的值范围在 0 到 1 之间的浮点值渐变起始点的偏移量为 0, 渐变结束的偏移量为 1. 因为是渐变所以至少要使用辆车 addColorStop 方法来追加两个颜色即使开始颜色与结束颜色可以追加对个颜色. 然后把 fillStyle 设定为 LinearGradient 对象然后执行填充的方法就完成了绘制渐变图形.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 渐变图形 </title>
- </head>
- <body>
- <canvas id="canvas" width="500" height="500">
- </canvas>
- <script>
- var canvas=document.getElementById("canvas");
- context=canvas.getContext("2d");
- /*context.fillStyle="#eeffee";
- context.fillRect(0, 0, 500, 500);*/
- // 渐变图形
- var gradient=context.createLinearGradient(0, 0, 0, 300);
- gradient.addColorStop(0, 'rgb(255,255,0)');
- gradient.addColorStop(1, 'rgb(0,255,255)');
- context.fillStyle=gradient;
- context.fillRect(0, 0, 500, 500);
- </script>
- </body>
- </html>
实例
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 渐变 </title>
- </head>
- <body>
- <canvas id="canvas" width="500" height="500">
- </canvas>
- <script>
- var canvas=document.getElementById("canvas");
- var context=canvas.getContext("2d");
- var gradient=context.createLinearGradient(0, 0, 0, 300);
- gradient.addColorStop(0, 'rgb(255,255,0)');
- gradient.addColorStop(1, 'rgb(0,255,255)');
- context.fillStyle=gradient;
- context.fillRect(0, 0, 500, 500);
- var gradient1=context.createLinearGradient(0,0,500,500)
- gradient1.addColorStop(0, 'red');
- gradient1.addColorStop(0.5, '#eeeeee');
- for(var i=0;i<15;i++){
- context.beginPath();
- context.fillStyle=gradient1;
- context.arc(i*20,i*20,i*10,0,Math.PI*2,true);
- context.closePath();
- /!* 使用列开始路径和关闭了路径 *!/
- context.fill();
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/note/49226/8d1b0201175b2da2d5f11d8965d39aeb.html