-
-
Save cyio/bab9a01561b71dd8b2ab to your computer and use it in GitHub Desktop.
SVG:绘制运动的球 // source http://jsbin.com/hekesa
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<canvas id="graphic" width="600" height="400"> | |
Description of the graphic | |
</canvas> | |
<script id="jsbin-javascript"> | |
var canvas=document.querySelector('#graphic'); | |
var ctx=canvas.getContext('2d'); | |
var pos={x:0,y:100}; | |
var speed={x:2.5,y:1.6} | |
function draw(){ | |
// 清除尾巴 | |
ctx.clearRect(0,0,600,400); | |
// 每帧移动 | |
pos.x+=speed.x; | |
pos.y+=speed.y; | |
if(pos.x>600) speed.x=-1+(Math.random()*-2); | |
if(pos.y>400) speed.y=-1+(Math.random()*-2); | |
if(pos.x<0) speed.x=1+(Math.random()*2); | |
if(pos.y<0) speed.y=1+(Math.random()*2); | |
// 绘制 | |
ctx.fillStyle="#000"; | |
ctx.strokeStyle="#aaa" | |
ctx.beginPath(); | |
// Math.PI 表示一个圆的周长与直径的比例,约为 3.14159: | |
// Math.PI=π≈3.14159 | |
ctx.arc(pos.x,pos.y,10,0,Math.PI*2); | |
ctx.fill(); | |
ctx.stroke(); | |
// 循环 | |
requestAnimationFrame(draw); | |
}; | |
draw(); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">var canvas=document.querySelector('#graphic'); | |
var ctx=canvas.getContext('2d'); | |
var pos={x:0,y:100}; | |
var speed={x:2.5,y:1.6} | |
function draw(){ | |
// 清除尾巴 | |
ctx.clearRect(0,0,600,400); | |
// 每帧移动 | |
pos.x+=speed.x; | |
pos.y+=speed.y; | |
if(pos.x>600) speed.x=-1+(Math.random()*-2); | |
if(pos.y>400) speed.y=-1+(Math.random()*-2); | |
if(pos.x<0) speed.x=1+(Math.random()*2); | |
if(pos.y<0) speed.y=1+(Math.random()*2); | |
// 绘制 | |
ctx.fillStyle="#000"; | |
ctx.strokeStyle="#aaa" | |
ctx.beginPath(); | |
// Math.PI 表示一个圆的周长与直径的比例,约为 3.14159: | |
// Math.PI=π≈3.14159 | |
ctx.arc(pos.x,pos.y,10,0,Math.PI*2); | |
ctx.fill(); | |
ctx.stroke(); | |
// 循环 | |
requestAnimationFrame(draw); | |
}; | |
draw(); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var canvas=document.querySelector('#graphic'); | |
var ctx=canvas.getContext('2d'); | |
var pos={x:0,y:100}; | |
var speed={x:2.5,y:1.6} | |
function draw(){ | |
// 清除尾巴 | |
ctx.clearRect(0,0,600,400); | |
// 每帧移动 | |
pos.x+=speed.x; | |
pos.y+=speed.y; | |
if(pos.x>600) speed.x=-1+(Math.random()*-2); | |
if(pos.y>400) speed.y=-1+(Math.random()*-2); | |
if(pos.x<0) speed.x=1+(Math.random()*2); | |
if(pos.y<0) speed.y=1+(Math.random()*2); | |
// 绘制 | |
ctx.fillStyle="#000"; | |
ctx.strokeStyle="#aaa" | |
ctx.beginPath(); | |
// Math.PI 表示一个圆的周长与直径的比例,约为 3.14159: | |
// Math.PI=π≈3.14159 | |
ctx.arc(pos.x,pos.y,10,0,Math.PI*2); | |
ctx.fill(); | |
ctx.stroke(); | |
// 循环 | |
requestAnimationFrame(draw); | |
}; | |
draw(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment