Canvas--2

Posted 2020-08-15

Canvas2(关键词：setLineDash 、rect 、strokeRect 、clearRect 、arc、sin 、strokeText )

 

• 绘制其他样式：
• • lineCap 结束端点的设置
  • • lineCap  = “butt”  默认线冒
    • lineCap  = “round” 圆形线冒
    • lineCap  =  “aquare”正方形线冒

 

1. • lineJoin 创建拐角类型
   • • bevel：创建斜角
     • round：创建圆角
     • miter：默认，创建尖角

 

1. • miterLimit  设置或返回最大衔接长度，一般默认10

 

• 绘制虚线的方法
• • setLineDash（）   ----表示设置虚线，参数是一个数组
  • 如果传入一个参数， 表示虚线的实线部分和空白的部分的宽度是就是这个参数
  • 如果传入多个参数，然后，循环交替分别来使用数组中的值来设置

 

• 设置线的偏移
• • lineDashoffset
  • 注意：如果设置偏移，表示虚线的起始点往左移动

 

• 使用  rect 方法来绘制矩形
• • ctx.rect(100,100,200,300) ;   
    ctx.stroke();
  • • 第一个参数：起点的x坐标
    • 第二个参数：起点的y坐标
    • 第三个参数：绘制矩形的宽度
    • 第四个参数：绘制矩形的高度

 

1. • 直接绘制矩形
   • • ctx.strokeRect(100,100,200,300 );  参数和上面rect的一样

 

1. • 填充矩形
   • • ctx.fillRect(100,100,200,300 );  参数和上面rect的一样

 

1. • 清除矩形
   • • ctx.clearRect(100,100,200,300 );  参数和上面rect的一样
     • 注意：清除绘制好的矩形的时候，需要考虑边框问题（需要多处理1像素）

 

1. • 清除整个画布
   • • 第一种方法：ctx.clearRect(0,0,cv.width,cv.height);
     • 第二种方法(重置画布的width或者height)：设置cv.width = cv.width; 或者 cv.height = cv.height

 

• 绘制圆弧 
• • ctx.arc ( x, y, r, 起始的弧度，结束的弧度，counterclickwise )
  • 第一个参数：圆心的x坐标
  • 第二个参数：圆心的y坐标
  • 第三个参数：半径
  • 第四个参数：开始的弧度
  • 第五个参数：结束的弧度
  • 第六个参数：绘制的方向（顺时针/逆时针）

 

• 弧度：Math.sin(弧度)/Math.cos(弧度)
• 1. 在js中，所有跟角度有关的函数或者属性，都是通过弧度来计算的
  2. 公式：angle/180 = 弧度/Math.PI
  3. 角度转弧度：angle/180*Math.PI
  4. 弧度转角度：radian/Math.PI*180

// 角度转弧度

function toRadian(angle) {

  return angle / 180 * Math.PI;

}

 

// 弧度转角度

function toAngle(radian) {

  return radian / Math.PI * 180;

}

 

 

• 绘制扇形
• 1. moveTo  到圆心
  2. 绘制圆弧
  3. 如果是 fill 这时候扇形就绘制完毕了，如果是stroke ，最简单的处理方式：closePash（）；

 

• 绘制文字
• • strokeText（text，x，y）；
    fillText（text，x，y）；
  • • 第一个参数：要绘制的问题内容
    • 第二个参数：表示绘制到画布中的x坐标
    • 第三个参数：表示绘制到画布中的y坐标

 

• • 绘制文字的对齐方式
  • • ctx.textAlign = "start"  是默认值
    • ctx.textAlign = "left" 
    • ctx.textBaseLine = "middle";

 

• • measureText（）   作用：计算文本的宽度

// 这个方法的返回值：对象，要获取文字的宽度，就访问对象的 width 属性

textWidth = ctx.measureText(value.title).width;