Canvas 线性渐变

cakin24

浏览: 1388133 次
性别:
来自: 西安

最近访客更多访客>>

txnet

leimingchao

zhaojunlin

颜熙啊哈

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2017-11 ( 30)
2017-10 ( 128)
2017-09 ( 144)
更多存档...

博客分类：

HTML5

Canvas 线性渐变

一介绍

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下用来设置Canvas的线性渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变。

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

二代码

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 线性渐变 </title>
</head>
<body>
<h2> 线性渐变 </h2>
<canvas id="mc" width="400" height="280"
	style="border:1px solid black"></canvas>
<script type="text/javascript">
	// 获取canvas元素对应的DOM对象
	var canvas = document.getElementById('mc');
	// 获取在canvas上绘图的CanvasRenderingContext2D对象
	var ctx = canvas.getContext('2d');
	ctx.save();
	ctx.translate(30 , 20);
	// 创建线性渐变
	lg = ctx.createLinearGradient(0 , 0 , 160 , 80);
	// 向线性渐变上添加颜色
	lg.addColorStop(0.2 , "#f00");
	lg.addColorStop(0.5 , "#0f0");
	lg.addColorStop(0.9 , "#00f");
	// 设置使用线性渐变作为填充颜色
	ctx.fillStyle = lg;
	// 填充一个矩形
	ctx.fillRect(0 , 0 , 160 , 80);
	// 恢复坐标系统
	ctx.restore();
	// 平移坐标系统
	ctx.translate(280 , 160)
	ctx.beginPath();
	// 添加圆弧
	ctx.arc(0 , 0  , 80 , 0 , Math.PI * 2 , true);
	ctx.closePath();
	ctx.lineWidth = 12;
	// 再次创建线性渐变
	lg2 = ctx.createLinearGradient(-40 , -40 , 80 , 50);
	// 向线性渐变上添加颜色
	lg2.addColorStop(0.1 , "#ff0");
	lg2.addColorStop(0.4 , "#0ff");
	lg2.addColorStop(0.8 , "#f0f");
	// 设置使用线性渐变作为边框颜色
	ctx.strokeStyle = lg2;
	ctx.stroke();
</script>
</body>
</html>

三运行结果