演示见： http://runjs.cn/detail/vsyvcd9w http://sandbox.runjs.cn/show/vsyvcd9w 1. [代码] 由演示可见: 三角形颜色随时间缓慢渐变 htmlheadmeta charset="utf-8" /)title12 Triangles/titlescript//涂色 随时间渐变的 12个
http://runjs.cn/detail/vsyvcd9w
http://sandbox.runjs.cn/show/vsyvcd9w
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>