原创。效果见:
http://runjs.cn/detail/9qhedgen
- <html>
- <head>
- <meta charset="utf-8" />
- <title>多边形组成的旋转图案</title>
- <script>
- var x=new Array(4, 4, 46, 46, 139,139);
- var y=new Array(-1,-158,-140,-28, 26, 76);
- var degree=0;
- function drawCanvas(){
- var canvas= document.getElementById("myCanvas");
- var g = canvas.getContext("2d");
- g.clearRect(0,0,canvas.width, canvas.height);
- g.save();
- g.translate(200,200);
- g.rotate(Math.PI/180*degree++);
- g.fillStyle="green";
- for (var j=0;j<3;j++){
- 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.fill();
- g.rotate(Math.PI/180*120);
- }
- g.restore();
- }
- </script>
- </head>
- <body onLoad="setInterval('drawCanvas()',200);">
- <canvas id="myCanvas" width="600" height="600" >
- <p>Your browser does not support the canvas element!</p>
- </canvas>
- </body>
- </html>
来源: https://www.oschina.net/code/snippet_2756874_58779