canvas学习笔记(二)

创建矩形

1. rect(x , y , width , height)
   • x , y 是矩形左上角的座标位置
   • width和height是矩形的宽和高，单位为像素。
   • 该方法只规划了所绘制矩形的路径，并没有填充和描边
2. strokeRect(x , y , width , height)
   • 参数含义与rect( )方法相同
   • 该方法在在规划完矩形路径后会立即进行描边，不必再写stroke( )方法
3. fillRect(x , y , width , height)
   • 参数含义与rect( )方法相同
   • 方法执行完成后。立即对当前矩形进行fill填充
4. clearRect(x , y , width , height):清除某个矩形内的绘制内容，相当于橡皮擦

绘制圆形

1. arc(x , y , r , sAngle , eAngle , counterclockwise)
   • x , y 指的是圆心座标
   • r指的是半径
   • sAngle:绘制开始的角度，注意是弧度，圆心到最右边点是 0 度，顺时针方向弧度增大
   • eAngel:结束的角度，注意是弧度
   • counterclockwise：是否是逆时针。true 是逆时针，false：顺时针
2. 弧度和角度的转换公式： rad = deg * Math.PI / 180;
3. 圆上面点的座标计算公式：
   • Math.sin(弧度)
   • Math.cos(弧度)
   • x = x0 + Math.cos(rad) * R
     • x0: 圆心的x轴方向上的座标
     • R：指的是圆心到要计算的点的直线距离
     • rad：该值为弧度值，指的是所计算的点与圆心的连线和x轴正方向的夹角的弧度值。
   • y = y0 + Math.sin(rad) * R
     • y0: 圆心在y轴上的座标，其余的同上

绘制上下文的文字属性

1. font 设置或返回文本内容的当前字体属性,例如:ctx.font = “18px ‘微软雅黑’”;
2. textAlign 设置或返回文本内容的当前对齐方式,有以下属性值：
   • start : 默认。文本在指定的位置开始。
   • end : 文本在指定的位置结束。
   • center: 文本的中心被放置在指定的位置
   • left : 文本左对齐。
   • right : 文本右对齐。
3. textBaseline 设置或返回在绘制文本时使用的当前文本基线
   • alphabetic ： 默认。文本基线是普通的字母基线
   • top ： 文本基线是 em 方框的顶端
   • hanging ： 文本基线是悬挂基线
   • middle ： 文本基线是 em 方框的正中。
   • ideographic： 文本基线是 em 基线。
   • bottom ： 文本基线是 em 方框的底端
4. fillText( )：在画布上绘制被填充的文本
5. strokeText( )：在画布上绘制文本(无填充)
6. measureText( )：返回包含指定文本宽度的对象

绘制图片

1. drawImage(img , x , y)：基本图片绘制
   • x , y 绘制图片左上角的座标， img是绘制图片的dom对象
2. drawImage(img , x , y , width , height)：
   • 该方法用于在画布上绘制图片，并指定宽高
   • 如果指定宽高，最好成比例，不然图片会被拉伸
   • 设置高 = 原高度 * 设置宽/ 原宽度
3. drawImage(img, sx , sy , swidth , sheight , x , y , width , height)
   • 该方法用于图片裁剪
   • sx , sy 裁剪的左上角座标，
   • swidth：裁剪图片的高度。 sheight:裁剪的高度

本文摘录自老马前端canvas学习笔记，如有侵权，请联系删除