当前访客身份:游客 [ 登录 | 加入开源中国 ]

代码分享

当前位置:
代码分享 » JavaScript  » 编程基础
分享到: 
收藏 +0
0
演示见:
http://runjs.cn/detail/vsyvcd9w
http://sandbox.runjs.cn/show/vsyvcd9w
标签: <无>

代码片段(2) [全屏查看所有代码]

1. [代码]由演示可见: 三角形颜色随时间缓慢渐变     跳至 [1] [全屏预览]

<html>
<head>
<meta charset="utf-8" />)
<title>12 Triangles</title>
<script>
//涂色 随时间渐变的 12个三角形 组成的图案
var x1=new Array(  4,   4,  70); // 右三角形顶点坐标
var y1=new Array(-15,-238,-130);
var x2=new Array( -4,  -4, -70); // 左三角形顶点坐标
var y2=new Array(-15,-238,- 130);

function drawTriagle( x,y,color,g){
g.beginPath();
g.moveTo(x[0],y[0]);
for (var i=1;i<x.length;i++)
g.lineTo(x[i],y[i]);
g.closePath();
g.fillStyle=color;
g.fill();	
}

var inc=true;
var col=0;
function colorchange(){
	var s="#";
	s += (col).toString(16);
	s +="52";
	return s;	
	}
	
function drawCanvas(){
var g = document.getElementById("myCanvas").getContext("2d");
g.fillStyle="#F0FFFF";
g.fillRect(10,10,600,600);
g.save();
g.translate(300,300);

for (var i=0;i<6;i++){
drawTriagle(x1,y1,colorchange(),g);
drawTriagle(x2,y2,colorchange(),g);
g.rotate(Math.PI/180*60);
}
g.restore();
if (inc) col++; else col--;
	if (col==0) inc=true;
	if (col==15) inc=false;

}
function preparation(){
	setInterval('drawCanvas()',500);
}
</script>
</head>
<body onLoad="preparation()">
<canvas id="myCanvas" width="1000" height="700" >  
   <p>Your browserdoes not support the canvas element!</p>  
</canvas> 
</body>
</html>

2. [图片] 12Triangles.png    



开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(1)

  • 1楼:zander谁在用- 发表于 2016-12-02 11:05 回复此评论
    屌!!!
开源从代码分享开始 分享代码
tcxu的其它代码 全部(43)...