HTML5——Canvas绘制曲线

太过爱你忘了你带给我的痛 2023-03-01 09:17 298阅读 0赞

### Canvas绘制曲线 ###

*  绘制曲线
 *   *   *   *  绘制圆形
             *  绘制弧形
             *  二次贝塞尔
             *  三次贝塞尔
 *  Canvas变形
 *   *   *   *  translate(x, y)
             *  rotate(angle)
             *  scale(x, y)

# 绘制曲线 #

角度与弧度的js表达式（相当高中的弧度制:radians=(Math.PI/180)\*degrees

<table> 
 <thead> 
  <tr> 
   <th>曲线</th> 
   <th>函数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>圆形</td> 
   <td>arc(x, y, radius, startAngle, endAngle, anticlockwise)</td> 
  </tr> 
  <tr> 
   <td>弧形</td> 
   <td>arcTo(x1, y1, x2, y2, radius)</td> 
  </tr> 
  <tr> 
   <td>二次贝塞尔</td> 
   <td>quadraticCurveTo(cp1x, cp1y, x, y)</td> 
  </tr> 
  <tr> 
   <td>三次贝塞尔</td> 
   <td>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</td> 
  </tr> 
 </tbody> 
</table>

#### 绘制圆形 ####

对象.arc(参数一，参数二，参数三，参数四，参数五, 参数六)

//绘制一个圆形 ---
            /* * 参数1:开始的横坐标 * 参数2:开始的纵坐标 * 参数3:半径 * 参数4:开始的角度 * 参数5:结束的角度 * 参数6:方向---true 或者是 false,默认是false,是顺时针, * * 参数4和参数5---本身是弧度---角度*Math.PI/180 * * * */
           //ctx.moveTo(100,100);
            ctx.lineWidth=20;
            ctx.arc(100,100,50,0,360*Math.PI/180);
            //ctx.closePath();
            ctx.stroke();

#### 绘制弧形 ####

对象.arcTo(参数一，参数二，参数三，参数四，参数五)

//起点
            ctx.moveTo(50,50);
            /* *参数1:控制点的横坐标 * 参数2:控制点的纵坐标 * 参数3：结束点的横坐标 * 参数4:结束点的纵坐标 * 参数5:半径 * */
            ctx.arcTo(200,50,200,200,100);
            ctx.lineTo(180,200);
            //绘制
            ctx.stroke();

#### 二次贝塞尔 ####

对象.quadraticCurveTo(参数一，参数二，参数三，参数四)

ctx.moveTo(50,200);
      /* * 参数1:控制点的横坐标 * 参数2:控制点的纵坐标 * 参数3:结束点的横坐标 * 参数4:结束点的纵坐标 * */
    ctx.quadraticCurveTo(200,50,250,180);
    ctx.stroke();//绘制

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]

#### 三次贝塞尔 ####

对象.bezierCurveTo(参数一，参数二，参数三，参数四，参数五, 参数六)

ctx.moveTo(100,200);
      /* * * 参数1:控制点1的横坐标 * 参数2:控制点1的纵坐标 * 参数3:控制点2的横坐标 * 参数4:控制点2的纵坐标 * 参数5:结束点的横坐标 * 参数6:结束点的纵坐标 * */
     ctx.bezierCurveTo(50,50,200,150,150,300);
     ctx.stroke();//绘制

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]

# Canvas变形 #

#### translate(x, y) ####

1.  我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。
2.  translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量.

在canvas中translate是累加的

#### rotate(angle) ####

1.  这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
2.  旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法

在canvas中rotate是累加的

#### scale(x, y) ####

1.  参数1:横向的x轴的缩放因子,参数2:纵向的y轴的缩放因子
2.  scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。
3.  值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。
4.  缩放一般我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。
5.  如果先正常绘制,在设置缩放因子,那么先绘制的图,不会有影响
6.  如果先设置缩放因子,那么后面所有的图都有影响
    
        在canvas中scale是累称的

ctx.scale(2,1);
            ctx.strokeStyle = "yellow";
            ctx.strokeRect(100,200,100,100);
            ctx.save();
            ctx.scale(1,1);
            ctx.strokeStyle = "red";
            //注意开启新的路径才可以有不一样的样式
            ctx.beginPath();
            ctx.strokeRect(100,100,100,100);
            ctx.restore();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20230209/c097d771c9214fe0a49e219d3339d3ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020072320153192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200723203359301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg==,size_16,color_FFFFFF,t_70