原创。 通过HTML5canvas创造由18个菱形构成的齿轮，并产生动画效果。 Ananimationismadeofthewheelconsisting18diamends.Thewheelisrotating andtranslating. 效果见： http://runjs.cn/detail/6aqbajzl 1. [代码] HTML5 canv
通过 HTML5 canvas 创造由18个菱形构成的齿轮，并产生动画效果。
An animation is made of the wheel consisting 18 diamends. The wheel is rotating
and translating.
效果见：
http://runjs.cn/detail/6aqbajzl
1. [代码]HTML5 canvas animation 动画
<html>
<head>
<meta charset="GB2312" />
<title>rhombus 菱形</title>
<script>
var color = new Array(18);
var name= new Array("国","中","源","开","*","*");
var d=30; // 菱形的高度（长轴）
var radius=0; //菱形轮圈的半径
var x0=200;
var y0=220;
var larger=1;
var alpha=0;
var eastwards=1;
function createColor(){
for (i=0;i<color.length;i++)
color[i]=randomColor();
}
function drawDiamond(){
var g=document.getElementById("canvas").getContext("2d");
/* 一个菱形多边形各顶点位置数据 */
var xPoints = new Array( radius-d,radius,radius+ d, radius);
var yPoints = new Array(2*d+radius, 4*d+radius, 2*d+radius, radius);
g.clearRect(x0-600 ,y0-600 ,1200,1200);
g.font= '60px ARIAL';
g.fillStyle="orange";
g.fillText("Open source,China",20,60);
g.save();
g.translate(x0,y0);
g.rotate(Math.PI*alpha);
var index=0;
for (var count = 0; count < 18 ; count++ ) {
g.rotate( Math.PI /9); // 坐标系旋转20度
fillPolygon( xPoints,yPoints,color[count],g) // 以这种随机颜色，填充菱形
g.beginPath();
g.arc(0,4*d,d*0.2,0,2*Math.PI);
g.fillStyle="red";
g.fill();
g.fillStyle="blue";
g.font= d*0.8 + 'px 楷体';
g.fillText(name[index++%name.length], d*0.35, d*4.2);
g.font= d*0.5 + 'px ARIAL';
g.fillStyle="orange";
g.fillText("open source",d*0.8,d*0.2);
}
if (eastwards==1)
x0=x0+2;
else x0=x0-2;
if (x0>=1100)
eastwards=0;
if (x0<=100)
eastwards=1;
g.restore();
if(larger==1) {
d=d+0.5; alpha = alpha + 0.005;
}else {
d=d-0.5; alpha = alpha - 0.005;
}
if (d>=50) larger=0;
if (d<=1) larger=1;
}
function randomColor(){
var s ="#";
for (var i=0;i<3;i++)
s += Math.floor(Math.random()*16).toString(16);
return s;
}
function fillPolygon(x,y,color,ctx){
ctx.beginPath();
ctx.moveTo(x[0],y[0]);
for (var i=1;i<x.length;i++)
ctx.lineTo(x[i],y[i]);
ctx.closePath();
ctx.fillStyle=color;
ctx.fill();
}
function preparation(){
createColor();
setInterval('drawDiamond()',100);
}
</script>
<style>
#canvas{
z-index:5;
position:absolute;
left:0px;
top:0px;
width:1400px;
height:600px;
}
</style>
</head>
<body onload="preparation()">
<canvas id="canvas" width="1400" height="600" >
<p>Your browserdoes not support the canvas element!</p>
</canvas>
</body>
</html>