永远不要跟别人比幸运,我从来没想过我比别人幸运,我也许比他们更有毅力,在最困难的时候,他们熬不住了,我可以多熬一秒钟、两秒钟,甚至更久。

使用canvas绘制渐变背景

JavaScript 新民 363℃ 已收录 3评论
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>使用canvas 画一个圆</title>
	</head>
	<body>
		
		<canvas id="can" width="300" height="300" style="border: 1px solid #555;"> </canvas>
		
		<script type="text/javascript">
			var canvas = document.getElementById("can");
		var ctx = canvas.getContext("2d");
		// 创建渐变的线性对象 ,第一个参数:渐变开始的x坐标。第二个参数:渐变开始的y坐标。 第三个参数:渐变结束的x坐标  。 第四个参数:渐变结束的y坐标
		var grd = ctx.createLinearGradient(0,0,175,50);
		
		// addColorStop() 方法规定 gradient 对象中的颜色和位置  。第一个参数介于0.0与1.0之间的值,表示渐变中开始与结束之间的位置。第二个参数:在结束位置显示的css 颜色
		grd.addColorStop(0,"#FF0000");
		grd.addColorStop(1,"#00FF00");
		ctx.fillStyle=grd;
		
		// fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
		ctx.fillRect(0,0,175,50);
		</script>
	</body>
	</html>
本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:http://www.snowruin.com/?p=1752
喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情 代码 贴图 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)条精彩评论。
  1. 认真拜读,好为学徒!
    藏阴套图网2018-09-18 17:28 回复| Google Chrome 14.0.802.30| Windows 7
  2. 新手~学习起来~~~~~
    跨境卖家导航2018-08-31 01:04 回复| Firefox 50.0| unknow
  3. 这里真心不错,每次来都有新收获!
    大喜2018-08-15 08:49 回复| Google Chrome 14.0.802.30| Windows 7