使用Canvas的javascript示例,太震撼了

切换背景色
主题: 字体: 切换行号 全选代码块(Ctrl+C复制) 半瓶墨水1年前贴出, JavaScript 语言
JavaScript代码: 使用Canvas的javascript示例,太震撼了
01 //代码来自: http://developer.mozilla.org/en/docs/Canvas_tutorial:Transformations
02 //查看效果: http://developer.mozilla.org/samples/canvas-tutorial/5_2_canvas_translate.html
03 //在IE下使用canvas: http://excanvas.sourceforge.net/
04 function draw() {
05   var ctx = document.getElementById('canvas').getContext('2d');
06   ctx.fillRect(0,0,300,300);
07   for (var i=0;i<3;i++) {
08     for (var j=0;j<3;j++) {
09       ctx.save();
10       ctx.strokeStyle = "#9CFF00";
11       ctx.translate(50+j*100,50+i*100);
12       drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);
13       ctx.restore();
14     }
15   }
16 }
17 function drawSpirograph(ctx,R,r,O){
18   var x1 = R-O;
19   var y1 = 0;
20   var i  = 1;
21   ctx.beginPath();
22   ctx.moveTo(x1,y1);
23   do {
24     if (i>20000) break;
25     var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
26     var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
27     ctx.lineTo(x2,y2);
28     x1 = x2;
29     y1 = y2;
30     i++;
31   } while (x2 != R-O && y2 != 0 );
32   ctx.stroke();
33 }
返回正常查看模式 返回代码发芽网首页