HTML5中canvas知识点详解3-绘制渐变图形

最新推荐文章于 2022-05-17 14:48:36 发布

chenzhong5173

最新推荐文章于 2022-05-17 14:48:36 发布

阅读量211

点赞数

文章标签： xhtml

原文链接：https://my.oschina.net/dreamchenming/blog/675726

版权

一.渐变概念

1.创建线性渐变。第一二个参数是起始位置，第三四个参数是终点位置。

createLinearGradient(0,0,0,400)

2.创建径向渐变。第一二个参数是第一个圆的圆点位置，第三个参数是第一个圆的半径。第四五个参数是第二个圆的圆点位置，第六个参数是圆的半径。

createRadialGradient(200,200,0,200,200,400)

二.渐变步骤

1.创建渐变对象

var lg = oCt.createLinearGradient(0,0,0,400);

2.追加渐变区域的颜色(不能忘记写了)

    lg.addColorStop(0.1,'rgb(255,255,0)');
   lg.addColorStop(0.3,'rgb(255,0,255)');
   lg.addColorStop(1,'rgb(0,255,255)');

3.将渐变对象赋给样式。

oCt.fillStyle = lg;

三.渐变小实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>绘制渐变图形</title>
<script>
window.onload = function(){
    
	//获得canvas元素
	var oC = document.getElementById('can');
	//取得上下文
	var oCt = oC.getContext('2d');
	//设置绘图样式
	oCt.fillStyle = '#EEEEFF';
	//绘制填充图形
	oCt.fillRect(0,0,500,500);
	//1.绘制线性渐变。创建线性变化的对象,第一二个参数是起始位置，第三四个参数是终点位置。
	//var lg = oCt.createLinearGradient(0,0,0,400);
	//2.绘制径向渐变，第一二个参数是第一个圆的圆点位置，第三个参数是第一个圆的半径。第四五个参数是第二个圆的圆点位置，第六个参数是圆的半径。
	var lg = oCt.createRadialGradient(200,200,0,200,200,400);
	//给线性变化对象追加颜色，第一个参数是0-1表示的是渐变的范围，第二个参数是设置的颜色。
	lg.addColorStop(0.1,'rgb(255,255,0)');
	lg.addColorStop(0.3,'rgb(255,0,255)');
	lg.addColorStop(1,'rgb(0,255,255)');
	for(var i = 0;i < 10;i++){
		//1.开始创建路径
		oCt.beginPath();
		//2.创建图像的路径，圆的路径
		oCt.arc(i * 25,i * 25,i * 10,0,Math.PI * 2,true);
		//3.路径创建完成后，关闭路径，
		oCt.closePath();
		//4.设置绘制的样式，将渐变变换对象赋值给fillStyle属性。fillStyle属性可以设置填充的颜色，也可以是对象。
		oCt.fillStyle = lg;
		oCt.fill();
	}
	
};
</script>
</head>

<body>
<canvas id='can' width="500px" height="500px">
<span>该浏览器不支持canvas标签元素</span>
</canvas>
</body>
</html>

转载于:https://my.oschina.net/dreamchenming/blog/675726

chenzhong5173

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中canvas知识点详解3-绘制渐变图形

一.渐变概念 1.创建线性渐变。第一二个参数是起始位置，第三四个参数是终点位置。 createLinearGradient(0,0,0,400) 2.创建径向渐变。第一二个参数是第一个圆的圆点位置，第三个参数是第一个圆的半径。第四五个参数是第二个圆的圆点位置，第六个参数是圆的半径。 ...
复制链接

扫一扫