代码
比这篇新的文章:
锁定鼠标
比这篇旧的文章: Python调用glibc
作者: 半瓶墨水, 点击555次, 评论(0), 收藏者(0)
打分:
所有评论，共0条：( 我也来说两句)
比这篇旧的文章: Python调用glibc
使用Canvas的javascript示例，太震撼了
语言: JavaScript, 标签: canvas 2008/08/11发布 3个月前更新 更新记录作者: 半瓶墨水, 点击555次, 评论(0), 收藏者(0)
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 }
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 }
所有评论，共0条：( 我也来说两句)