您的位置：首页 > Web前端 > HTML5

HTML5逐步实现

2015-08-17 12:35 573 查看

渐变

Context对象能够通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象。这两个方法的原型例如以下：

Object createLinearGradient(x1, y1, x2, y2);

创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。

Object createRadialGradient(x1, y1, r1, x2, y2, r2);

创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。

渐变对象创建完毕之后必须使用它的addColorStop()方法来加入颜色，该方法的原型例如以下：

void addColorStop(position, color);

当中position表示加入颜色的位置。取值范围为[0, 1]，0表示起点，1表示终点；color表示加入的颜色，取值能够是不论什么CSS颜色值。

渐变对象创建并配置完毕之后就能够将其赋予Context对象的strokeStyle属性或者fillStyle属性，然后绘制的图形就具有了所需的渐变效果。

那咱们一起看一下以下这个样例：

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>		<style type="text/css">			canvas{				left: 50%; position:relative; margin-left: -200px; top;			}		</style>	</head>	<body>		<canvas id="drawDiagonal" width="400" height="500" style="border: 1px solid #008B8B;"></canvas>	</body>	<script type="text/javascript">		var canvas=document.getElementById('drawDiagonal');		var cd=canvas.getContext('2d');		cd.save();		cd.translate(-10,350);		cd.beginPath();		cd.moveTo(0,0);		cd.quadraticCurveTo(170,-80,260,-190);		cd.quadraticCurveTo(310,-250,410,-250);		cd.strokeStyle='#663300';		cd.lineWidth=50;		cd.stroke();		cd.restore();				var lg = cd.createLinearGradient(80,220,240, 200); //能够尝试改变这里的參数。改变不同的效果。             lg.addColorStop(0, 'yellow');              lg.addColorStop(0.9, '#3CB371');         lg.addColorStop(1,'#2E8B57');        cd.fillStyle=lg;//把设置好的颜色值附给cd                cd.strokeStyle ='yellowgreen';		cd.lineWidth=4;		cd.lineJoin='round'		cd.beginPath();		cd.moveTo(200,40);		cd.lineTo(160,100);		cd.lineTo(185,100);		cd.lineTo(145,160);		cd.lineTo(170,160);		cd.lineTo(135,220);		cd.lineTo(180,220);		cd.lineTo(170,320);		cd.lineTo(235,320);		cd.lineTo(220,220)		cd.lineTo(260,220);		cd.lineTo(225,160);		cd.lineTo(250,160);		cd.lineTo(210,100);		cd.lineTo(235,100);		cd.closePath();		cd.fill();		cd.stroke();	</script></html>

其效果例如以下图所看到的：

大家试图去尝试一点点！

在没有明确的地方是能够相互沟通.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航