当前位置： 移动技术网 > IT编程>开发语言>JavaScript > HTML5——Canvas绘制曲线

HTML5——Canvas绘制曲线

2020年07月24日  | 移动技术网IT编程  | 我要评论

Canvas绘制曲线

绘制曲线

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

曲线 函数
圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise)
弧形 arcTo(x1, y1, x2, y2, radius)
二次贝塞尔 quadraticCurveTo(cp1x, cp1y, x, y)
三次贝塞尔 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

绘制圆形

对象.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();//绘制

在这里插入图片描述

三次贝塞尔

对象.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();//绘制

在这里插入图片描述

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();

在这里插入图片描述

本文地址：https://blog.csdn.net/weixin_45511236/article/details/107533729

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网