- <!DOCTYPE html>
- <html>
- <head></head>
- <body>
- <canvas id="canvas" width="600" height="400"></canvas>
- <script>
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext('2d');
- context.fillStyle="red";
- context.fillRect(0,0,600,400);
- context.translate(170,70);//移动坐标原点
- context.rotate(Math.PI);//旋转
- create5star(context);//绘制五角星
- context.fill();//填充画布
- context.scale(0.3,0.3);//小五角星缩放
- for(var i=0;i<4;i++){
- context.rotate(5);
- create5star(context);
- context.fill();
- }
- //绘制五角星
- function create5star(context){
- var n = 0;
- var dx = 100;
- var dy = 0 ;
- var s = 50;
- context.beginPath();//创建路径
- context.fillStyle="rgba(255,255,0,1)";
- var x = Math.sin(0);
- var y= Math.cos(0);
- var dig = Math.PI/5 *4;
- for(var i = 0;i<5;i++){//画五角星的五条边
- var x = Math.sin(i*dig);
- var y = Math.cos(i*dig);
- context.lineTo(dx+x*s,dy+y*s);
- }
- context.closePath();
- }
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/070520133173.html
来源: http://www.codesnippet.cn/detail/070520133173.html