canvas createLinearGradient()

2018-12-1 12:14| 作者: admin| 查看: 1331| 评论: 0|来自: 蚂蚁部落

createLinearGradient方法可以创建一个线性渐变对象。

所谓线性渐变,就是颜色值沿着轴线的方向进行有规则的过渡。

轴线方向可以是水平、垂直或者倾斜。

语法结构:

[JavaScript] 纯文本查看 复制代码
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);

参数解析:

(1).x0:必需,规定渐变起点x轴坐标。

(2).y0:必需,规定渐变起点y轴坐标。

(3).x1:必需,规定渐变终点x轴坐标。

(4).y1:必需,规定渐变终点y轴坐标。

createLinearGradient方法返回一个现象渐变对象。

既然是颜色渐变,必定要为其添加相关的渐变颜色,并且但是此对象并不能孤立存在。

它必须作为图案填充或者描边才能展现出它的效果,后面会有详细的代码实例演示。

浏览器兼容:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).火狐浏览器支持此方法。

(5).Opera浏览器支持此方法。

(6).Safari浏览器支持此方法。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload = function () {
  let cs = document.getElementById("cs");
  let ctx = cs.getContext("2d");
  let linear = ctx.createLinearGradient(100, 50, 300, 50);
  linear.addColorStop(0, "red");
  linear.addColorStop(1, "blue");
  ctx.fillStyle = linear;
  ctx.fillRect(100, 50, 200, 50);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="250"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/121539fru882z9s2rd31r3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码实现了红色到蓝色的渐变效果,代码分析如下:

(1).通过createLinearGradient(100, 50, 300, 50)方法创建一个渐变对象。

(2).从方法的参数可以得出,是水平渐变,且渐变区域200像素宽。

(3).然后通过addColorStop方法对渐变区域分段且添加渐变颜色,上述代码规定,渐变由红色到蓝色从渐变区域的起始位置开始到终止位置结束。

(4).线性渐变对象不能单独存在,上述代码将其作为矩形的填充。

对渐变区域划分的说明:

(1).整个渐变区域可以看做1,然后利用百分比方式(需要转换为小数形式)对此区域进行划分,在此区域内指定一种颜色过渡到另一种颜色,区域的边缘是纯色。

(2).前面的代码整个渐变仅划分了一个区域,实现由红色到蓝色的渐变效果,0和1点是纯色。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload = function () {
  let cs = document.getElementById("cs");
  let ctx = cs.getContext("2d");
  let linear = ctx.createLinearGradient(100, 50, 300, 50);
  linear.addColorStop(0, "red");
  linear.addColorStop(0.5, "blue");
  linear.addColorStop(1, "green");
  ctx.fillStyle = linear;
  ctx.fillRect(100, 50, 200, 50);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="250"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/121602bq7y861dy75py1pt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码实现了三个颜色的渐变效果,代码分析如下:

(1).通过addColorStop将整个渐变区域划分为两块,实现三种颜色的过渡。

(2).0-0.5之间由红色渐变到蓝色,0.5-1之间由蓝色渐变到绿色。

(3).0、0.5和1点是纯色,分别是红、蓝、绿。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload = function () {
  let cs = document.getElementById("cs");
  let ctx = cs.getContext("2d");
  let linear = ctx.createLinearGradient(100, 100, 200, 200);
  linear.addColorStop(0.2, "red");
  linear.addColorStop(0.5, "blue");
  linear.addColorStop(1, "green");
  ctx.fillStyle = linear;
  ctx.fillRect(100, 100, 100, 100);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="250"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/121623l776v51czkbz177y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码演示了具有一定倾斜度的渐变。

原理很简单,就是设置起点坐标与终点坐标不在一个水平线上。


鲜花

握手

雷人

路过

鸡蛋
返回顶部