首页 > 代码库 > Canvas--2

Canvas--2

Canvas2(关键词:setLineDash 、rect 、strokeRect 、clearRect 、arc、sin 、strokeText )
 
  • 绘制其他样式:
    • lineCap 结束端点的设置
      • lineCap  = “butt”  默认线冒
      • lineCap  = “round” 圆形线冒
      • lineCap  =  “aquare”正方形线冒
 
    • lineJoin 创建拐角类型
      • bevel:创建斜角
      • round:创建圆角
      • miter:默认,创建尖角
 
    • miterLimit  设置或返回最大衔接长度,一般默认10
 
  • 绘制虚线的方法
    • setLineDash()   ----表示设置虚线,参数是一个数组
    • 如果传入一个参数, 表示虚线的实线部分和空白的部分的宽度是就是这个参数
    • 如果传入多个参数,然后,循环交替分别来使用数组中的值来设置
 
  • 设置线的偏移
    • lineDashoffset
    • 注意:如果设置偏移,表示虚线的起始点往左移动
 
  • 使用  rect 方法来绘制矩形
    • ctx.rect(100,100,200,300) ;   
      ctx.stroke();
      • 第一个参数:起点的x坐标
      • 第二个参数:起点的y坐标
      • 第三个参数:绘制矩形的宽度
      • 第四个参数:绘制矩形的高度
 
    • 直接绘制矩形
      • ctx.strokeRect(100,100,200,300 );  参数和上面rect的一样
 
    • 填充矩形
      • ctx.fillRect(100,100,200,300 );  参数和上面rect的一样
 
    • 清除矩形
      • ctx.clearRect(100,100,200,300 );  参数和上面rect的一样
      • 注意:清除绘制好的矩形的时候,需要考虑边框问题(需要多处理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;

Canvas--2