html5 canvas绘图矩形框和圆形的案例编码

2021-02-24 10:24 jianzhan

html5 canvas绘图矩形框和圆形的案例编码

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3.     <head>   
  4.         <meta charset="UTF⑻">   
  5.         <title></title>   
  6.     </head>   
  7.     <body onload="draw(),drawarc()">   
  8.         <!--绘图的流程：获得canvas元素->获得左右文->填充与绘图边框->设置制图款式-->   
  9.         <!--绘图别的繁杂图型必须应用相对路径：刚开始建立相对路径->建立图型相对路径->关掉相对路径->绘图图型-->   
  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;        //边框宽度   
  27.         context.fillRect(50,50,100,100); //填充矩形框（內部矩形框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();  //刚开始建立相对路径   
  43.               context2.arc(i*25,i*25,i*10,0,Math.PI*2,true);  //建立圆形相对路径   
  44.               context2.closePath();  //关掉相对路径   
  45.               context2.fillStyle='Rgba(255,0,0,0.25)'; //设定色调   
  46.               context2.fill();  //填充图型   
  47.        }   
  48. }   
  49.        
  50.        
  51. </script>  

以上便是网编为大伙儿带来的html5 canvas绘图矩形框和圆形的案例编码的所有內容了，期待大伙儿多多适用步伐之家。

为您推荐