Canvas学习笔记——Canvas基础用法

系统管理员 2022-09-04 10:56 270阅读 0赞

Canvas是HTML5中的新增API，提供了一个通过Javascript和HTML的`<canvas>`元素来绘制图形。Canvas API主要聚焦于2D图形。`<canvas>`与一般标签一样可以设置宽高，建议在标签内设置宽高，而不要用css设置。canvas画布就是一张图片，可以以图片形式保存。

### 用法 ###

#### 1.绘制矩形 ####

常用方法：

*  `strokeRect()`：以路径方式绘制矩形
 *  `fillRect()`：以填充方式绘制矩形
 *  `clearRect()`：清除矩形  
    三个方法都有四个参数，都表示为起点横坐标，起点纵坐标，矩形宽，矩形高

结果：  
![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/07dd765cf27e4829bc372e1935187d0a.pn][https_img-blog.csdnimg.cn_07dd765cf27e4829bc372e1935187d0a.pn]

结果：  
![在这里插入图片描述][ead672db7d094fc4925cdb78ef1f9675.png]

#### 2. 绘制路径 ####

*  `moveTo()`：接收两个参数，分别是点的横坐标和纵坐标，从起始点开始绘制
 *  `lineTo()`：接收两个参数，表示横坐标和纵坐标，从起点到该点绘制直线

结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70]

*  `beginPath()`：当设置完绘制参数后，再绘制第二个图形，会使用设置在第一个图形上的参数。为了使两个图形之间的参数互不影响，在绘制图形前使用该方法。Javascript代码如下：

var canvas = document.getElementById('can')
    //获取canvas上下文
    var ctx = canvas.getContext('2d')
    //在画布上绘画
    ctx.moveTo(100, 100)
    ctx.lineTo(200, 100)
    ctx.lineTo(200, 200)
    ctx.closePath() //闭合路径
    ctx.strokeStyle = 'blue'
    ctx.lineWidth = 10
    ctx.stroke()
    //填充
    ctx.fillStyle = 'green'
    ctx.fill()
    
    ctx.beginPath()
    ctx.moveTo(250, 100)
    ctx.lineTo(250, 200)
    ctx.lineTo(350, 200)
    ctx.closePath()
    ctx.strokeStyle = 'orange'
    ctx.lineWidth = 5 
    ctx.stroke()
    ctx.fillStyle = 'pink'
    ctx.fill()

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 1]

*  线段两端效果

结果  
![在这里插入图片描述][ede3ef50f33a4f7d9ec63922468a2bb9.png]

*  `save()`可以保存之前设置的样式，在`save()`后设置了新的样式后再使用`restore()`可以恢复

#### 3. 绘制曲线 ####

*  `arc()`：接收6个参数，分别为：圆心横坐标，圆心纵坐标，半径，开始角度，结束角度，绘制方向（true为逆时针，false为顺时针）。其中角度参数指的是弧度，弧度与角度的换算关系：弧度 = 角度\*Math.PI/180。

**弧线**

结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 2]

#### 4. 变形 ####

**移动画板起点**

效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 3]

> translate多次使用时会累加，如果两次执行ctx.translate(100,100)，那么起点就是(200,200)

**旋转坐标轴**

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 4]  
**缩放**

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 5]

#### 5. 绘制图片 ####

*  `drawImage()`：接收五个参数，分别为图片对象，起点横坐标，起点纵坐标，图片宽度，图片高度

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 6]  
**使用图片填充矩形**

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 7]

#### 6.渐变 ####

*  `createLinearGradient()`：线性渐变，接收四个参数，分别为起点横坐标，起点纵坐标，终点横坐标，终点纵坐标
 *  `createRadialGradient()`：径向渐变，接收六个参数，分别为起点圆心横坐标，起点圆心纵坐标，终点圆心横坐标，终点圆心纵坐标

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 8]

#### 7.绘制文字 ####

*  `strokeText()`：绘制空心文字
 *  `fillText()`：绘制实心文字

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 9]  
**文字对齐方式——居中，以起点为中心点**

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 10]将`ctx.textAlign`的值改为`right`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 11]

#### 8. 绘制阴影 ####

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 12]

#### 9. 像素操作 ####

**通过操作像素值来设置画布颜色**

通过操作像素点将其设为`(255,255,0,255)`，可将画布颜色设置为黄色：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 13]  
**获取单个像素点的值**

**设置单个像素点的值**

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 14]  
关于canvas更多内容可以查看：[https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas\_API/Tutorial][https_developer.mozilla.org_zh-CN_docs_Web_API_Canvas_API_Tutorial]。

[https_img-blog.csdnimg.cn_07dd765cf27e4829bc372e1935187d0a.pn]: /images/20220829/1d70a402590645b69eb2dd499db07d39.png
[ead672db7d094fc4925cdb78ef1f9675.png]: /images/20220829/d2d30ca3877e44869e43c8490a666636.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70]: /images/20220829/dc8c424425d048b8a83ed3e7e94c063a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/33b0ada54ffc4e60813e19624971843c.png
[ede3ef50f33a4f7d9ec63922468a2bb9.png]: /images/20220829/1da496df17344897b62ba978cea27a48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/3fb9bdca95e34678b42b82cd5fd1832d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/ed0516a9ef9b4b688035002fcb952f30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/7bfaa9c7badb42ee81f71367e4cd6cd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/08cfc397653d40b686e374337fffce23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/81cff7198bde408c8895aed54802c9c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/50854c6e14054d5aa92011a2c78291c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 8]: /images/20220829/b89e3ab352f54008bb60ab266c1504dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 9]: /images/20220829/c715ff088c3c4737b95c056d1ee418ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 10]: /images/20220829/c96053f5cc174bc9824ea44810a6f067.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 11]: /images/20220829/1a961c396c4f4d63bb5c83e91391fcfa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 12]: /images/20220829/825faeaf504043ed8f2dd9e751272a80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 13]: /images/20220829/4b7927f7a3a045bbad20e867d434632b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70 14]: /images/20220829/259aa43d2ac643078b490cd1bf3337f9.png
[https_developer.mozilla.org_zh-CN_docs_Web_API_Canvas_API_Tutorial]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial