【Canvas与艺术】绘制动态太极图
【说明】
太极图虽简单，但用arc勾画正确的路径，需要对起止角度和顺逆朝向有清晰的认识。
【图例】
【代码】
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>绘制动态太极图</title> <style type="text/css"> .centerlize{ margin:0 auto; width:1200px; } </style> </head> <body onload="init();"> <div class="centerlize"> <canvas id="myCanvas" width="10px" height="10px" style="border:1px dotted black;"> 如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试. </canvas> </div> </body> </html> <script type="text/javascript"> <!-- /***************************************************************** * 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中， * 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。 ******************************************************************/ // canvas的绘图环境 var ctx; // 边长 const LENGTH=540; // 舞台对象 var stage; //------------------------------- // 初始化 //------------------------------- function init(){ // 获得canvas对象 var canvas=document.getElementById('myCanvas'); canvas.width=LENGTH; canvas.height=LENGTH; // 初始化canvas的绘图环境 ctx=canvas.getContext('2d'); ctx.translate(LENGTH/2,LENGTH/2);// 原点平移到画布中央 // 准备 stage=new Stage(); stage.init(); // 开幕 animate(); } // 播放动画 function animate(){ stage.update(); stage.paintBg(ctx); stage.paintFg(ctx); // 循环 if(true){ window.requestAnimationFrame(animate); } } // 舞台类 function Stage(){ var step=0; // 初始化 this.init=function(){ } // 更新 this.update=function(){ step++; if(step>=60000){ step=0; } } // 画背景 this.paintBg=function(ctx){ ctx.clearRect(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH);// 清屏 // 加上背景色，否则白鱼看不出来 ctx.fillStyle="cyan"; ctx.fillRect(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH); ctx.fill(); } // 画前景 this.paintFg=function(ctx){ ctx.save(); ctx.rotate(step*Math.PI/60); // 左边黑鱼，注意要首尾连续 ctx.beginPath(); ctx.arc(0,-128,128,Math.PI*0.5,Math.PI*1.5,true);// 顺时针 ctx.arc(0,0,256,Math.PI*1.5,Math.PI*0.5,true); // 顺时针 ctx.arc(0,128,128,Math.PI*0.5,Math.PI*1.5,false);// 逆时针 ctx.closePath(); ctx.fillStyle="black"; ctx.fill(); // 黑鱼白眼 ctx.beginPath(); ctx.arc(0,-128,32,0,Math.PI*2,true); ctx.closePath(); ctx.fillStyle="white"; ctx.fill(); // 右边白鱼，注意要首尾连续 ctx.beginPath(); ctx.arc(0,0,256,Math.PI*1.5,Math.PI*0.5,false); // 逆时针 ctx.arc(0,-128,128,Math.PI*0.5,Math.PI*1.5,true);// 顺时针 ctx.arc(0,128,128,Math.PI*0.5,Math.PI*1.5,false);// 逆时针 ctx.closePath(); ctx.fillStyle="white"; ctx.fill(); // 白鱼黑眼 ctx.beginPath(); ctx.arc(0,128,32,0,Math.PI*2,true); ctx.closePath(); ctx.fillStyle="black"; ctx.fill(); ctx.restore(); } } /*-------------------------------------------------------------------------- 《魔鬼的广告》 你若伏地拜我，我就把这一国与这国的荣华赐你； 你若伏地拜我，我就把这一省与这省的荣华赐你； 你若伏地拜我，我就把这一市与这市的荣华赐你； 你若伏地拜我，我就把这一公司与这公司的荣华赐你； --------------------------------------------------------------------------*/ //--> </script>
END
