在Canvas里可以用createLinearGradient()来创建一个渐变色线性对象。
然后使用addColorStop()方法定义渐变色颜色;最后将渐变颜色分配给strokeStyle或fillStyle属性进行填充,使用fillRect()等方法来绘制“已填色”的形状,如矩形,圆形,线条,文本等。
createLinearGradient() 方法创建线性的渐变对象,渐变可用于填充矩形,圆形,线条,文本等不同的颜色。
JavaScript语法:
context.createLinearGradient(x0,y0,x1,y1);
参数值:
● x0:渐变开始点的 x 坐标
● y0:渐变开始点的 y 坐标
● x1:渐变结束点的 x 坐标
● y1:渐变结束点的 y 坐标
addColorStop()方法规定渐变对象中的颜色和位置。
JavaScript 语法:
gradient.addColorStop(stop,color);
参数值:
● stop:介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
● color:在结束位置显示的CSS颜色值
示例1:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> </head> <body style="text-align:center;"> <h2>线性渐变效果</h2> <canvas id="myCanvas" width="350" height="180"></canvas> <script> var a = document.getElementById("myCanvas"); var gctx = a.getContext("2d"); //创建一个渐变色线性对象 var clg = gctx.createLinearGradient(100, 150, 200, 120); //定义渐变色颜色 clg.addColorStop(0, "yellow"); clg.addColorStop(1, "pink"); gctx.fillStyle = clg; //设置用于填充绘画的颜色、渐变或模式 gctx.fillRect(80, 20, 200, 110); //绘制渐变图形 </script> </body> </html>
示例2:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> </head> <body style="text-align:center;"> <h2>线性渐变效果</h2> <canvas id="myCanvas" width="350" height="180"></canvas> <script> var a = document.getElementById("myCanvas"); var gctx = a.getContext("2d"); //创建一个渐变色线性对象 var lingrad = gctx.createLinearGradient(0, 0, 0, 150); //定义渐变色颜色 lingrad.addColorStop(0, '#00AB3B'); lingrad.addColorStop(0.5, '#45ec3f'); lingrad.addColorStop(0.5, '#66CC20'); lingrad.addColorStop(1, '#f3f'); gctx.fillStyle = lingrad; //设置用于填充绘画的颜色、渐变或模式 gctx.fillRect(110, 20, 130, 130); //绘制渐变图形 </script> </body> </html>
网友评论文明上网理性发言 已有0人参与
发表评论: