html5 canvas绘制矩形和圆形的实例代码

html5 canvas绘制矩形和圆形的实例代码

JavaScript Code 复制内容到剪贴板

        "UTF-8">


    "draw(),drawarc()">



        绘制矩形:"ca">
        绘制圆形："yuan">


   </span></li> 
    <li><span>    </span><span class="comment">//绘制矩形 </span><span>  </span></li> 
    <li class="alt"><span>    </span><span class="keyword">function</span><span> draw(){   </span></li> 
    <li><span>        </span><span class="keyword">var</span><span> canvas=document.getElementById(</span><span class="string">'ca'</span><span>); </span><span class="comment">//获取canvas元素 </span><span>  </span></li> 
    <li class="alt"><span>        </span><span class="keyword">if</span><span> (canvas==</span><span class="keyword">null</span><span>)   </span></li> 
    <li><span>           </span><span class="keyword">return</span><span> </span><span class="keyword">false</span><span>;   </span></li> 
    <li class="alt"><span>        </span><span class="keyword">var</span><span> context=canvas.getContext(</span><span class="string">'2d'</span><span>); </span><span class="comment">//取得上下文 </span><span>  </span></li> 
    <li><span>        context.fillStyle=</span><span class="string">'#EEEFF'</span><span>;   </span><span class="comment">//填充颜色 </span><span>  </span></li> 
    <li class="alt"><span>        context.fillRect(0,0,400,300); </span><span class="comment">//填充矩形 (矩形1) </span><span>  </span></li> 
    <li><span>        context.fillStyle=</span><span class="string">'red'</span><span>;   </span></li> 
    <li class="alt"><span>        context.strokeStyle=</span><span class="string">'blue'</span><span>; </span><span class="comment">//边框颜色 </span><span>  </span></li> 
    <li><span>        context.lineWidth=1;        </span><span class="comment">//边框宽度 </span><span>  </span></li> 
    <li class="alt"><span>        context.fillRect(50,50,100,100); </span><span class="comment">//填充矩形（内部矩形2） </span><span>  </span></li> 
    <li><span>        context.strokeRect(50,50,100,100); </span><span class="comment">//绘制边框 </span><span>  </span></li> 
    <li class="alt"><span>           </span></li> 
    <li><span>    }   </span></li> 
    <li class="alt"><span>    </span><span class="comment">//绘制圆形 </span><span>  </span></li> 
    <li><span>   </span><span class="keyword">function</span><span> drawarc(){   </span></li> 
    <li class="alt"><span>    </span><span class="keyword">var</span><span> canvas2=document.getElementById(</span><span class="string">'yuan'</span><span>); </span><span class="comment">//获取canvas元素 </span><span>  </span></li> 
    <li><span>        </span><span class="keyword">if</span><span> (canvas2==</span><span class="keyword">null</span><span>)   </span></li> 
    <li class="alt"><span>    </span><span class="keyword">if</span><span>(canvas2==</span><span class="keyword">null</span><span>)   </span></li> 
    <li><span>       </span><span class="keyword">return</span><span> </span><span class="keyword">false</span><span>;   </span></li> 
    <li class="alt"><span>       </span><span class="keyword">var</span><span> context2=canvas2.getContext(</span><span class="string">'2d'</span><span>);  </span><span class="comment">//取得上下文 </span><span>  </span></li> 
    <li><span>       context2.fillStyle=</span><span class="string">'#EEEEEF'</span><span>;   </span></li> 
    <li class="alt"><span>       context2.fillRect(0,0,400,300);   </span></li> 
    <li><span>       </span><span class="keyword">var</span><span> n=0;   </span></li> 
    <li class="alt"><span>       </span><span class="keyword">for</span><span>(</span><span class="keyword">var</span><span> i=0;i<10;i++){   </span></li> 
    <li><span>              context2.beginPath();  </span><span class="comment">//开始创建路径 </span><span>  </span></li> 
    <li class="alt"><span>              context2.arc(i*25,i*25,i*10,0,Math.PI*2,</span><span class="keyword">true</span><span>);  </span><span class="comment">//创建圆形路径 </span><span>  </span></li> 
    <li><span>              context2.closePath();  </span><span class="comment">//关闭路径 </span><span>  </span></li> 
    <li class="alt"><span>              context2.fillStyle=</span><span class="string">'Rgba(255,0,0,0.25)'</span><span>; </span><span class="comment">//设置颜色 </span><span>  </span></li> 
    <li><span>              context2.fill();  </span><span class="comment">//填充图形 </span><span>  </span></li> 
    <li class="alt"><span>       }   </span></li> 
    <li><span>}   </span></li> 
    <li class="alt"><span>       </span></li> 
    <li><span>       </span></li> 
    <li class="alt"><span>

以上就是小编为大家带来的html5 canvas绘制矩形和圆形的实例代码的全部内容了，希望大家多多支持脚步之家。