<!DOCTYPE html> <html> <head> <title>html拖拽事件</title> <script src='../js/jquery-1.8.3.js' type="text/javascript"></script> <style type="text/css"> #canvas_dom{background-color: #FFFFF0} </style> </head> <body> <div> <canvas id="canvas_dom" width="500px" height="500px"></canvas> </div> </body> <script type="text/javascript"> var canvas_dom = document.getElementById("canvas_dom"); var ctx = canvas_dom.getContext('2d'); var unit_angle = Math.PI*2/360; var init_angle = 0; function draw(){ ctx.clearRect(0,0,canvas_dom.width,canvas_dom.height); ctx.save(); ctx.translate(250,250); ctx.fillStyle = "green"; ctx.beginPath(); ctx.arc(0,0,50,0,Math.PI*2,false); ctx.closePath(); ctx.fill(); var small_x = Math.cos(init_angle)*80; var small_y = Math.sin(init_angle)*80; ctx.beginPath(); ctx.arc(small_x,small_y,5,0,Math.PI*2,false); ctx.closePath(); ctx.fill(); ctx.restore(); init_angle = init_angle + unit_angle; window.requestAnimationFrame(draw); } //自执行函数 (function(){ draw(); })(); </script> </html>
canvas小球绕大球转动动画
猜你喜欢
转载自blog.csdn.net/wdhouyigege/article/details/80442230
今日推荐
周排行