首页 > 代码库 > 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.rect(100,100,200,300) ;
-
- 直接绘制矩形
-
- 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(弧度)
- 在js中,所有跟角度有关的函数或者属性,都是通过弧度来计算的
- 公式:angle/180 = 弧度/Math.PI
- 角度转弧度:angle/180*Math.PI
- 弧度转角度:radian/Math.PI*180
// 角度转弧度
function toRadian(angle) {
return angle / 180 * Math.PI;
}
// 弧度转角度
function toAngle(radian) {
return radian / Math.PI * 180;
}
- 绘制扇形
- moveTo 到圆心
- 绘制圆弧
- 如果是 fill 这时候扇形就绘制完毕了,如果是stroke ,最简单的处理方式:closePash();
- 绘制文字
-
- strokeText(text,x,y);
fillText(text,x,y); -
- 第一个参数:要绘制的问题内容
- 第二个参数:表示绘制到画布中的x坐标
- 第三个参数:表示绘制到画布中的y坐标
- strokeText(text,x,y);
-
- 绘制文字的对齐方式
-
- ctx.textAlign = "start" 是默认值
- ctx.textAlign = "left"
- ctx.textBaseLine = "middle";
-
- measureText() 作用:计算文本的宽度
// 这个方法的返回值:对象,要获取文字的宽度,就访问对象的 width 属性
textWidth = ctx.measureText(value.title).width;
Canvas--2
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。