利用 HTML5 Canvas 组件绘制太极图案
jopen
12年前
<p></p> <div style="padding-bottom:0px;overflow-y:auto;background-color:#ffffff;margin:5px;padding-left:0px;padding-right:0px;font-family:Arial,Verdana,sans-serif;word-wrap:break-word;font-size:12px;padding-top:0px;"> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;"><strong>一实现思路：</strong></p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;">实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆，首先绘</p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;">制两个半圆，分别为黑色和白色，组成一个圆，绘制完成以后再分别绘制一个黑色</p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;">和白色的圆在绘制好的黑白圆之内，半径恰好是黑白大圆一半。 最后在绘制好的两</p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;">个黑白小圆内分别填充白色和黑色的点，半径大小为10pixel左右。</p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;"></p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;"><strong>二程序效果如下：</strong></p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;"><img alt="利用 HTML5 Canvas 组件绘制太极图案 " src="https://simg.open-open.com/show/965c9d07b5896f149dd5bbd61d338fec.png" width="522" height="440" /></p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;"><strong>三关键程序解析：</strong></p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;"></p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;">绘制半圆的程序，其中200，200表示开始绘制圆心点坐标，第三个参数150表示绘制圆的半径</p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;">第四个参数表示开始角度，第五个参数表示结束角度，最后一个参数表示是否为顺时针或者逆时针</p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;">绘制白色半圆的代码如下：</p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;"></p> <pre class="brush:javascript; toolbar: true; auto-links: false;">px; background-color: rgb(240, 240, 240); "> ctx.fillStyle="#fff"; ctx.beginPath(); ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false); ctx.closePath(); ctx.fill();</pre> <br /> 绘制黑色半圆的代码如下： <p></p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;"></p> <pre class="brush:javascript; toolbar: true; auto-links: false;">px; background-color: rgb(240, 240, 240); "> ctx.fillStyle="#000"; ctx.beginPath(); ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false); ctx.closePath(); ctx.fill();</pre> <br /> 在太极图案中添加文字的代码使用了透明处理，Canvas全局透明度设置函数 <p></p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;">如下：</p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;"></p> <pre class="brush:javascript; toolbar: true; auto-links: false;">px; background-color: rgb(240, 240, 240); "> // set transparency value ctx.globalAlpha = 0.2;</pre> <br /> 绘制文字的代码如下： <p></p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;"></p> <pre class="brush:javascript; toolbar: true; auto-links: false;">px; background-color: rgb(240, 240, 240); "> // Draw semi transparent text ctx.fillStyle = "#f00"; ctx.font = "32pt Arial"; ctx.fillText("Hello", 220, 200); ctx.fillText("Canvas", 100, 250);</pre> <br /> 程序完全JavaScript代码如下： <p></p> <p style="padding-bottom:2px;margin:4px 0px;padding-left:0px;padding-right:0px;padding-top:2px;"></p> <pre class="brush:javascript; toolbar: true; auto-links: false;">px; background-color: rgb(240, 240, 240); "> window.onload = function() { var cvs = document.getElementById("canvas-path"); ctx = cvs.getContext("2d"); // Create circle, radius = 150 // start point(x, y), radius, start angle, end angle, boolean antiClockWise ctx.fillStyle="#fff"; ctx.beginPath(); ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false); ctx.closePath(); ctx.fill(); ctx.fillStyle="#000"; ctx.beginPath(); ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false); ctx.closePath(); ctx.fill(); // draw sub circle // start point(x, y), radius, start angle, end angle, boolean antiClockWise ctx.fillStyle="#000"; ctx.beginPath(); ctx.arc(200, 275, 75, 0, Math.PI*2, false); ctx.closePath(); ctx.fill(); ctx.fillStyle="#fff"; ctx.beginPath(); ctx.arc(200, 125, 75, 0, Math.PI*2, false); ctx.closePath(); ctx.fill(); // fill black and white point ctx.fillStyle="#fff"; ctx.beginPath(); ctx.arc(200, 275, 10, 0, Math.PI*2, false); ctx.closePath(); ctx.fill(); ctx.fillStyle="#000"; ctx.beginPath(); ctx.arc(200, 125, 10, 0, Math.PI*2, false); ctx.closePath(); ctx.fill(); // set transparency value ctx.globalAlpha = 0.2; // Draw semi transparent text ctx.fillStyle = "#f00"; ctx.font = "32pt Arial"; ctx.fillText("Hello", 220, 200); ctx.fillText("Canvas", 100, 250); ctx.globalAlpha = 1.0; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.fillStyle = "#000"; ctx.font = "20px Times New Roman"; ctx.fillText("-created by gloomyfish", 100, 30); };</pre> <br /> 我为什么要在插图上加上我的名字，因为发现文章被转载的时候居然没有被标出来！ <br /> <br /> 来自：http://blog.csdn.net/jia20003/article/details/7231538 <p></p> </div>