温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

用html5画动态太极图

发布时间:2020-06-12 17:21:33 阅读:4304 作者:desuzh 栏目:移动开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>
<!DOCTYPE HTML>  <html>  <body>    <canvas id="myCanvas"  width="500" height="500" >your browser does not support the canvas tag </canvas>     <script type="text/javascript">       var deg = 0;      var r = 30;      var rl = 100;  function drawTaiji() { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var colorA = "rgb(0, 0, 0)"var colorB = "red";  var px =Math.sin(deg)*r; var py =Math.cos(deg)*r; context.clearRect(00300300); context.beginPath(); context.fillStyle = colorA; context.arc(rl, rl, 600.5 * Math.PI +deg, 1.5 * Math.PI +deg, true); context.closePath(); context.fill(); context.fillStyle = colorB; context.beginPath(); context.arc(rl, rl, 601.5Math.PI +deg, 0.5 * Math.PI +deg, true); context.closePath(); context.fill(); context.fillStyle = colorB; context.beginPath(); context.arc(rl+px, rl-py, 300.5 * Math.PI + deg, 1.5 * Math.PI + deg, true); context.closePath(); context.fill(); context.fillStyle = colorA; context.beginPath(); context.arc(rl-px, rl+py, 301.5 * Math.PI + deg, 0.5 * Math.PI + deg, true); context.closePath(); context.fill(); context.fillStyle = colorA; context.beginPath(); context.arc(rl+px, rl-py, 802 * Math.PItrue); context.closePath(); context.fill(); context.fillStyle = colorB; context.beginPath(); context.arc(rl-px, rl+py, 802 * Math.PItrue); context.closePath(); context.fill(); deg +=0.1; }  setInterval(drawTaiji, 100); </script>     </body>  </html>   <!DOCTYPE HTML>   <html>   <body>      <canvas id="myCanvas"  width="500" height="500" >your browser does not support the canvas tag </canvas>       <script type="text/javascript">    var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext("2d"); var angle = 0var count = 360var clrA = '#000'var clrB = 'red';  function taiji(x, y, radius, angle, wise) {     angleangle = angle || 0;     wisewise = wise ? 1 : -1;     ctx.save();     ctx.translate(x, y);     ctx.rotate(angle);     ctx.fillStyle = clrA;     ctx.beginPath();     ctx.arc(00, radius, 0Math.PItrue);     ctx.fill();     ctx.beginPath();     ctx.fillStyle = clrB;     ctx.arc(00, radius, 0Math.PIfalse);     ctx.fill();     ctx.fillStyle = clrB;     ctx.beginPath();     ctx.arc(wise * -0.5 * radius, 0, radius / 20Math.PI * 2true);     ctx.fill();     ctx.beginPath();     ctx.fillStyle = clrA;     ctx.arc(wise * +0.5 * radius, 0, radius / 20Math.PI * 2false);     ctx.arc(wise * -0.5 * radius, 0, radius / 100Math.PI * 2true);     ctx.fill();     ctx.beginPath();     ctx.fillStyle = clrB;     ctx.arc(wise * +0.5 * radius, 0, radius / 100Math.PI * 2true);     ctx.fill();     ctx.restore(); }  loop = setInterval(function () {     beginTag = true;     ctx.clearRect(00, canvas.width, canvas.height);     taiji(20020050Math.PI * (angle / count) * 2true);     //taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false);     angle = (angle + 5) % count; }, 50);   </script>       </body>   </html>   AI代码助手复制代码

出自:http://www.cnblogs.com/iamzhanglei/archive/2012/03/27/2419268.html

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×