HTML5：Canvas 标签

逃离我推掉我的手 2022-10-11 13:33 346阅读 0赞

什么是 canvas？  
H5 `<canvas>` 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。`<canvas>` 标签只是图形容器，必须使用脚本来绘制图形。

> **创建一个画布（Canvas）**

一个画布在网页中是一个矩形框，通过 `<canvas>` 元素来绘制。默认情况下 `<canvas>` 元素没有边框和内容。

例：

*  标签通常需要指定一个 id 属性 (脚本中经常引用)
 *  width 和 height 属性定义的画布的大小

**使用 style 属性来添加边框**:

> **使用 JavaScript 来绘制图像**

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：  
示例：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);

> **Canvas 坐标**

*  canvas 是一个二维网格
 *  canvas 的左上角坐标为 (0,0)
 *  上面的 fillRect 方法拥有参数 (0,0,150,75)。

示例：  
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。

![f9b7cc43e2c16c063c2c62ad3951e079.png][]

> **Canvas 路径**

<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>quadraticCurveTo()</td> 
   <td>创建二次贝塞尔曲线</td> 
  </tr> 
  <tr> 
   <td>bezierCurveTo()</td> 
   <td>创建三次方贝塞尔曲线</td> 
  </tr> 
  <tr> 
   <td>arc()</td> 
   <td>创建弧/曲线（用于创建圆形或部分圆）</td> 
  </tr> 
  <tr> 
   <td>arcTo()</td> 
   <td>创建两切线之间的弧/曲线</td> 
  </tr> 
  <tr> 
   <td>isPointInPath()</td> 
   <td>如果指定的点位于当前路径中，则返回 true，否则返回 false</td> 
  </tr> 
 </tbody> 
</table>

示例：  
定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();

**在 canvas 中绘制圆形**

arc(x,y,r,start,stop)

示例：  
使用 arc() 方法 绘制一个圆:

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

> **Canvas 文本**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>font</td> 
   <td>定义字体</td> 
  </tr> 
  <tr> 
   <td>fillText(text,x,y)</td> 
   <td>在 canvas 上绘制实心的文本</td> 
  </tr> 
  <tr> 
   <td>strokeText(text,x,y)</td> 
   <td>在 canvas 上绘制空心的文本</td> 
  </tr> 
 </tbody> 
</table>

示例1：  
使用 “Arial” 字体在画布上绘制一个高 30px 的文字（实心）：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.fillText("Hello World",10,50);

示例2：  
使用 “Arial” 字体在画布上绘制一个高 30px 的文字（空心）：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.strokeText("Hello World",10,50);

> **Canvas 渐变**

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>createLinearGradient()</td> 
   <td>创建线性渐变</td> 
  </tr> 
  <tr> 
   <td>createRadialGradient()</td> 
   <td>创建放射状/环形的渐变</td> 
  </tr> 
  <tr> 
   <td>createPattern()</td> 
   <td>在指定的方向上重复指定的元素</td> 
  </tr> 
  <tr> 
   <td>addColorStop()</td> 
   <td>规定渐变对象中的颜色和停止位置</td> 
  </tr> 
 </tbody> 
</table>

示例1:  
创建一个线性渐变。使用渐变填充矩形:

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
     
    // 创建渐变
    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
     
    // 填充渐变
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);

示例2:  
创建一个径向/圆渐变。使用渐变填充矩形：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
     
    // 创建渐变
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
     
    // 填充渐变
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);

[f9b7cc43e2c16c063c2c62ad3951e079.png]: /images/20221005/568ced9780b24444b57b378aed840d10.png