HTML5画布小dome八卦图

「爱情、让人受尽委屈。」 2023-08-17 16:51 112阅读 0赞

<table> 
 <tbody> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;!DOCTYPE html&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;html&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;head&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;meta charset="utf-8" /&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;title&gt;&lt;/title&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;style type="text/css"&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>#BAgua{ </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>width: 300px;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>height: 300px;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>margin: 0 auto;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>text-align: center;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>display: flex;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>justify-content: center;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>align-items: center;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>#mycanvas { </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>animation: 2s zhuan infinite linear;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>@keyframes zhuan { </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>0% {transform: rotate(0deg);}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>100% {transform: rotate(360deg);}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/style&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/head&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;body&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;div id="BAgua"&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;canvas id="mycanvas" width="200" height="200"&gt;&lt;/canvas&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/div&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/body&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/html&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;script type="text/javascript"&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>var bag=document.getElementById("mycanvas");</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>var ctx =bag.getContext("2d");</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.beginPath();//开始一条路径</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.arc(100,100,100,0,Math.PI*2);//绘制原型</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.stroke();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.beginPath();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.arc(100,100,100,Math.PI*0.5,Math.PI*1.5);</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.fillStyle="black";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.fill();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.beginPath();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.arc(100,50,50,Math.PI*0.5,Math.PI*1.5);</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.stroke();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.fillStyle="white";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.fill();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.beginPath();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.arc(100,150,50,Math.PI*0.5,Math.PI*1.5,true);</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.stroke();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.fillStyle="black";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.fill();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.beginPath();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.arc(100,50,10,0,Math.PI*2);</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.stroke();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.fillStyle="black";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.fill();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.beginPath();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.arc(100,150,10,0,Math.PI*2);</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.stroke();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.fillStyle="white";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>ctx.fill();</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/script&gt; </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td style="text-align:left;">&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/ylq818/p/10531299.html