濮阳杆衣贸易有限公司

主頁(yè) > 知識(shí)庫(kù) > html5 canvas繪制矩形和圓形的實(shí)例代碼

html5 canvas繪制矩形和圓形的實(shí)例代碼
熱門標(biāo)簽：高德地圖標(biāo)注賓館位置 飛亞外呼系統(tǒng) 聯(lián)通400電話申請(qǐng) 百應(yīng)電銷機(jī)器人產(chǎn)業(yè) 電視購(gòu)物電銷外呼系統(tǒng) 西寧智能外呼系統(tǒng)加盟 貸款電銷人工和機(jī)器人哪個(gè)好 杭州營(yíng)銷電銷機(jī)器人供應(yīng)商 電話機(jī)器人如何

html5 canvas繪制矩形和圓形的實(shí)例代碼

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html>   
  3.     <head>   
  4.         <meta charset="UTF-8">   
  5.         <title></title>   
  6.     </head>   
  7.     <body onload="draw(),drawarc()">   
  8.         <!--繪制的步驟：獲取canvas元素->取得上下文->填充與繪制邊框->設(shè)定繪圖樣式-->   
  9.         <!--繪制其他復(fù)雜圖形需要使用路徑：開(kāi)始創(chuàng)建路徑->創(chuàng)建圖形路徑->關(guān)閉路徑->繪制圖形-->   
  10.         <!--eg:繪制矩形-->   
  11.         繪制矩形:<canvas id="ca"></canvas><br />   
  12.         繪制圓形：<canvas id="yuan"></canvas>   
  13.     </body>   
  14. </html>   
  15. <script>   
  16.     //繪制矩形   
  17.     function draw(){   
  18.         var canvas=document.getElementById('ca'); //獲取canvas元素   
  19.         if (canvas==null)   
  20.            return false;   
  21.         var context=canvas.getContext('2d'); //取得上下文   
  22.         context.fillStyle='#EEEFF';   //填充顏色   
  23.         context.fillRect(0,0,400,300); //填充矩形 (矩形1)   
  24.         context.fillStyle='red';   
  25.         context.strokeStyle='blue'; //邊框顏色   
  26.         context.lineWidth=1;        //邊框?qū)挾?  
  27.         context.fillRect(50,50,100,100); //填充矩形（內(nèi)部矩形2）   
  28.         context.strokeRect(50,50,100,100); //繪制邊框   
  29.            
  30.     }   
  31.     //繪制圓形   
  32.    function drawarc(){   
  33.     var canvas2=document.getElementById('yuan'); //獲取canvas元素   
  34.         if (canvas2==null)   
  35.     if(canvas2==null)   
  36.        return false;   
  37.        var context2=canvas2.getContext('2d');  //取得上下文   
  38.        context2.fillStyle='#EEEEEF';   
  39.        context2.fillRect(0,0,400,300);   
  40.        var n=0;   
  41.        for(var i=0;i<10;i++){   
  42.               context2.beginPath();  //開(kāi)始創(chuàng)建路徑   
  43.               context2.arc(i*25,i*25,i*10,0,Math.PI*2,true);  //創(chuàng)建圓形路徑   
  44.               context2.closePath();  //關(guān)閉路徑   
  45.               context2.fillStyle='Rgba(255,0,0,0.25)'; //設(shè)置顏色   
  46.               context2.fill();  //填充圖形   
  47.        }   
  48. }   
  49.        
  50.        
  51. </script>  

以上就是小編為大家?guī)?lái)的html5 canvas繪制矩形和圓形的實(shí)例代碼的全部?jī)?nèi)容了，希望大家多多支持腳步之家。

標(biāo)簽：邯鄲 撫州 晉中 玉溪 內(nèi)蒙古 煙臺(tái) 牡丹江 安慶

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《html5 canvas繪制矩形和圓形的實(shí)例代碼》，本文關(guān)鍵詞  html5,canvas,繪制,矩形,和,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《html5 canvas繪制矩形和圓形的實(shí)例代碼》相關(guān)的同類信息！
  • 本頁(yè)收集關(guān)于html5 canvas繪制矩形和圓形的實(shí)例代碼的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章
    朝阳区| 巧家县| 太谷县| 弋阳县| 临泉县| 泗水县| 吴江市| 正定县| 澄江县| 峡江县| 伽师县| 大邑县| 乌什县| 亳州市| 庆云县| 潮州市| 石渠县| 鄂托克旗| 错那县| 铜山县| 柘城县| 信宜市| 凤凰县| 竹溪县| 长寿区| 永福县| 公安县| 浦江县| 如东县| 苏尼特左旗| 新晃| 文昌市| 微山县| 云龙县| 仪征市| 济阳县| 东丰县| 年辖：市辖区| 天水市| 汝州市| 盈江县|