可以先使用 html 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>
效果图:
来源: http://www.css88.com/qa/html5/10423.html