HTML5的学习之canvas画布(三)

ゞ浴缸里的玫瑰 2023-02-17 14:26 7阅读 0赞

## HTML5的学习之canvas画布 ##

上篇博客主要讲解了canvas线条有关的一些属性和方法。这篇文章我们继续学习canvas有关图形绘制的方法。

**1.矩形**

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>rect()</td> 
   <td>创建矩形。</td> 
  </tr> 
  <tr> 
   <td>fillRect()</td> 
   <td>绘制"被填充"的矩形。</td> 
  </tr> 
  <tr> 
   <td>strokeRect()</td> 
   <td>绘制矩形（无填充）。</td> 
  </tr> 
  <tr> 
   <td>clearRect()</td> 
   <td>在给定的矩形内清除指定的像素。</td> 
  </tr> 
 </tbody> 
</table>

**2.圆形**

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>arc()</td> 
   <td>创建弧/曲线（用于创建圆形或部分圆）。</td> 
  </tr> 
  <tr> 
   <td>arcTo()</td> 
   <td>创建两切线之间的弧/曲线。</td> 
  </tr> 
  <tr> 
   <td>ellipse()</td> 
   <td>创建椭圆。</td> 
  </tr> 
 </tbody> 
</table>

**3.路径**

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fill()</td> 
   <td>填充当前绘图（路径）。</td> 
  </tr> 
  <tr> 
   <td>stroke()</td> 
   <td>绘制已定义的路径。</td> 
  </tr> 
  <tr> 
   <td>beginPath()</td> 
   <td>起始一条路径，或重置当前路径。</td> 
  </tr> 
  <tr> 
   <td>moveTo()</td> 
   <td>把路径移动到画布中的指定点，不创建线条。</td> 
  </tr> 
  <tr> 
   <td>closePath()</td> 
   <td>创建从当前点回到起始点的路径。</td> 
  </tr> 
  <tr> 
   <td>lineTo()</td> 
   <td>添加一个新点，然后在画布中创建从该点到最后指定点的线条。</td> 
  </tr> 
  <tr> 
   <td>clip()</td> 
   <td>从原始画布剪切任意形状和尺寸的区域。</td> 
  </tr> 
  <tr> 
   <td>isPointInPath()</td> 
   <td>如果指定的点位于当前路径中，则返回 true，否则返回 false。</td> 
  </tr> 
  <tr> 
   <td>quadraticCurveTo()</td> 
   <td>创建二次贝塞尔曲线。</td> 
  </tr> 
  <tr> 
   <td>bezierCurveTo()</td> 
   <td>创建三次贝塞尔曲线。</td> 
  </tr> 
 </tbody> 
</table>

**路径HTML代码：**

**路径JavaScript代码：**

// 03canvas画布的路径
        // 1.获取元素
        var oCanvas = document.getElementById("my_canvas");
        // 2.设置画布大小
        oCanvas.width = "1000";
        oCanvas.height = "1000";
        // 3.获取 画布环境
        var myCanvas = oCanvas.getContext("2d");
        // 4.绘图
    
        
        // fill() 填充当前绘图（路径）。
        // myCanvas.fillStyle="skyblue";
        // myCanvas.rect(0, 0, 200, 200);
        // myCanvas.fill();
        // stroke() 绘制已定义的路径。
        // myCanvas.strokeStyle="yellow";
        // myCanvas.rect(0, 0, 200, 200);
        // myCanvas.stroke();
    
        // beginPath() 起始一条路径，或重置当前路径。
        myCanvas.beginPath();//开始 路径
        myCanvas.lineWidth="10";
        myCanvas.strokeStyle="yellow";
    
        // moveTo() 把路径移动到画布中的指定点，不创建线条。
        myCanvas.moveTo(0,50);
        // lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
        myCanvas.lineTo(200,200);
        myCanvas.lineJoin="miter";//尖角
        myCanvas.lineJoin="round";//圆角
        myCanvas.lineJoin="bevel";;//斜角
        myCanvas.lineTo(300,100);
    
        myCanvas.lineTo(400,500);
        myCanvas.lineTo(100,400);
        myCanvas.closePath();
        myCanvas.stroke();
        // closePath() 创建从当前点回到起始点的路径。

**圆形HTML代码：**

**圆形JavaScript代码：**

// 1.获取元素
        var oCanvas = document.getElementById("my_canvas");
        // 2.设置画布大小
        oCanvas.width = "1000";
        oCanvas.height = "1000";
        // 3.获取 画布环境
        var myCanvas = oCanvas.getContext("2d");
        // 4.绘图
        // beginPath() 起始一条路径，或重置当前路径
        // myCanvas.beginPath();//路径开始
        // // arc(x,y,r,起始角,结束角,false顺/true逆) 创建弧/曲线（用于创建圆形或部分圆）。
        // myCanvas.lineWidth="10"; 
        // // myCanvas.strokeStyle="yellow";
        // myCanvas.fillStyle="yellow";
        // myCanvas.arc(500,500,200,0,Math.PI/2,true);
        // myCanvas.closePath();
        // // myCanvas.stroke();
        // myCanvas.fill();
    
    
        // arcTo(x1,y1,x2,y2,r) 创建两切线之间的弧/曲线。
        myCanvas.beginPath();
        myCanvas.moveTo(50,50);
        myCanvas.lineTo(200,50);
        myCanvas.arcTo(300,50,300,150,100);
        myCanvas.lineTo(300,300);
        myCanvas.stroke();

**视频讲解链接：  
https://www.bilibili.com/video/BV1Fv41167hL/**