Canvas入门学习笔记

淡淡的烟草味﹌ 2022-04-04 13:50 283阅读 0赞

## 1. 什么是Canvas？ ##

1.canvas标签是HTML5中的一个标签，是一个绘制面板(画布)
    2.需要结合js代码进行操作，canvas定义为页面的一个可以绘制图像的区域
    3.canvas默认像素是300*150
    注意：如果浏览器不支持canvas标签，标签中的内容会显示出来

## 2. Canvas中的属性和方法 ##

### 2.1 路径 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>moveTo()</td> 
   <td>把路径移动到画布中的指定点，不创建线条</td> 
  </tr> 
  <tr> 
   <td>lineTo()</td> 
   <td>添加一个新点，然后在画布中创建从该点到最后指定点的线条</td> 
  </tr> 
  <tr> 
   <td>stroke()</td> 
   <td>绘制已定义的路径</td> 
  </tr> 
  <tr> 
   <td>beginPath()</td> 
   <td>起始一条路径，或重置当前路径</td> 
  </tr> 
  <tr> 
   <td>closePath()</td> 
   <td>创建从当前点回到起始点的路径</td> 
  </tr> 
  <tr> 
   <td>arc()</td> 
   <td>创建弧/曲线（用于创建圆形或部分圆）</td> 
  </tr> 
  <tr> 
   <td>setLineDash</td> 
   <td>设置虚线(参数是一个数组)</td> 
  </tr> 
  <tr> 
   <td>fill()</td> 
   <td>填充当前绘图(路径)</td> 
  </tr> 
  <tr> 
   <td>lineDashOffset</td> 
   <td>设置虚线偏移量</td> 
  </tr> 
 </tbody> 
</table>

### 2.2 线条样式 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>lineCap</td> 
   <td>设置或返回线条的结束端点样式</td> 
  </tr> 
  <tr> 
   <td>lineJoin</td> 
   <td>设置或返回两条线相交时，所创建的拐角类型</td> 
  </tr> 
  <tr> 
   <td>lineWidth</td> 
   <td>设置或返回当前的线条宽度</td> 
  </tr> 
  <tr> 
   <td>miterLimit</td> 
   <td>设置或返回最大斜接长度，只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效。</td> 
  </tr> 
 </tbody> 
</table>

### 2.3 矩形 ###

<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.4 颜色、样式和阴影 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fillStyle</td> 
   <td>设置或返回用于填充绘画的颜色、渐变或模式</td> 
  </tr> 
  <tr> 
   <td>strokeStyle</td> 
   <td>设置或返回用于笔触的颜色、渐变或模式</td> 
  </tr> 
  <tr> 
   <td>shadowColor</td> 
   <td>设置或返回用于阴影的颜色</td> 
  </tr> 
  <tr> 
   <td>shadowBlur</td> 
   <td>设置或返回用于阴影的模糊级别</td> 
  </tr> 
  <tr> 
   <td>shadowOffsetX</td> 
   <td>设置或返回阴影距形状的水平距离</td> 
  </tr> 
  <tr> 
   <td>shadowOffsetY</td> 
   <td>设置或返回阴影距形状的垂直距离</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>createLinearGradient()</td> 
   <td>创建线性渐变（用在画布内容上）</td> 
  </tr> 
  <tr> 
   <td>addColorStop()</td> 
   <td>规定渐变对象中的颜色和停止位置</td> 
  </tr> 
 </tbody> 
</table>

注意：

addColorStop(stop,color);
    stop: 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
    color: 在结束位置显示的 CSS 颜色值

### 2.5 合成 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>方法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>globalCompositeOperation</td> 
   <td>设置或返回新图像如何绘制到已有的图像上</td> 
  </tr> 
 </tbody> 
</table>

注意：globalCompositeOperation所对应的值：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>source-over</td> 
   <td>默认。在目标图像上显示源图像。</td> 
  </tr> 
  <tr> 
   <td>source-atop</td> 
   <td>在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。</td> 
  </tr> 
  <tr> 
   <td>source-in</td> 
   <td>在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。</td> 
  </tr> 
  <tr> 
   <td>source-out</td> 
   <td>在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。</td> 
  </tr> 
  <tr> 
   <td>destination-over</td> 
   <td>在源图像上方显示目标图像。</td> 
  </tr> 
  <tr> 
   <td>destination-atop</td> 
   <td>在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。</td> 
  </tr> 
  <tr> 
   <td>destination-in</td> 
   <td>在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。</td> 
  </tr> 
  <tr> 
   <td>destination-out</td> 
   <td>在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。</td> 
  </tr> 
  <tr> 
   <td>lighter</td> 
   <td>显示源图像 + 目标图像。</td> 
  </tr> 
  <tr> 
   <td>copy</td> 
   <td>显示源图像。忽略目标图像。</td> 
  </tr> 
  <tr> 
   <td>source-over</td> 
   <td>使用异或操作对源图像与目标图像进行组合。</td> 
  </tr> 
 </tbody> 
</table>