關於canvas畫原子運動模型

時間 2019-12-13

標籤關於 canvas 原子運動模型简体版

原文原文鏈接

參考連接：http://selinayu.cc/2018/07/23/canvas-%E5%B0%8F%E7%90%83%E8%BF%90%E5%8A%A8%E8%BD%A8%E8%BF%B9/javascript

就是在原子能圖標上橢圓運動的小球，效果以下html

代碼以下java

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>原子運動模型</title>
 5   <style>
 6     div {
 7       position: relative;
 8     }
 9     canvas {
10       position: absolute;
11     }
12   </style>
13 </head>
14 <body>
15 <div>
16   <canvas id="canvas" style="transform: rotate(0deg);">瀏覽器不支持canvas</canvas>
17   <canvas id="canvas1" style="transform: rotate(60deg);">瀏覽器不支持canvas</canvas>
18   <canvas id="canvas2" style="transform: rotate(120deg);">瀏覽器不支持canvas</canvas>
19 </div>
20 </body>
21 <script type="text/javascript">
22   function circleRunEllipse(elemId, canvasWidth, canvasHeight, circleColor, ellipseColor, ellipseHeight, ellipseWidth, ellipseSpeed) {
23     let canvas = document.getElementById(elemId);
24     let context=canvas.getContext("2d");
25 
26     let width = canvas.width = canvasWidth;
27     let height = canvas.height = canvasHeight;
28     let radius = 3;
29     let animationFrame = null; // 記錄執行的動畫，用於取消
30     // 畫實體圓
31     function drawCircle(x,y,radius,color){
32       context.save();
33       context.fillStyle = color;
34       context.globalAlpha=0.95
35       context.beginPath();
36       context.arc(x,y,radius,0,Math.PI *2);
37       context.closePath();
38       context.fill();
39       context.restore();
40     }
41 
42 
43     // 畫橢圓，使用lineTo,把橢圓分割許多片斷
44     // 橢圓的三角函數表達式 x = a*cos(t), y = b * sin(t);
45     function drawEllipse(color,x,y,a,b){
46       //這樣可使得每次循環所繪製的路徑（弧線）接近1像素
47       let step = (a > b) ? 1 / a : 1 / b;
48       context.save();
49       context.strokeStyle = color;
50       context.beginPath();
51       context.moveTo(x + a,y);
52       for(let i = 0; i < Math.PI *2; i += step){
53         context.lineTo(x + a * Math.cos(i),y + b * Math.sin(i))
54       }
55       context.closePath();
56       context.stroke();
57       context.restore();
58     }
59 
60     // 橢圓運動
61     let ellipseA = ellipseWidth; // 長軸 a
62     let ellipseB = ellipseHeight; // 短軸 b
63     let ellipseTime = 0;
64     let ellipseStep = ellipseSpeed;  //控制運動速度
65 
66     ellipseRun();
67     function ellipseRun(){
68       window.cancelAnimationFrame(animationFrame);
69       animationFrame = window.requestAnimationFrame(ellipseRun);
70       context.clearRect(0,0,width,height);
71       drawEllipse(ellipseColor,width/2,height/2, ellipseA ,ellipseB );
72       drawCircle(width/2 + ellipseA * Math.cos(ellipseTime),height/2 + ellipseB * Math.sin(ellipseTime),radius,circleColor);
73       ellipseTime += ellipseStep;
74     }
75   }
76   circleRunEllipse('canvas', 300, 300, 'red', 'blue', 70, 30, 0.01)
77   circleRunEllipse('canvas1', 300, 300, 'red', 'blue', 70, 30, 0.01)
78   circleRunEllipse('canvas2', 300, 300, 'red', 'blue', 70, 30, 0.01)
79 
80 </script>
81 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。