canvas--总结二

canvas图形绘制

  • 矩形绘制

rect(x,y,w,h)  没有独立路径

strokeRect(x,y,w,h) 有独立路径,不影响别的绘制

fillRect(x,y,w,h) 有独立路径,不影响别的绘制

clearRect(x,y,w,h)  需要擦除的矩形区域

 

  • 圆弧绘制

弧度概念

一个圆的弧度等于2π

角度弧度转化   一角度等于π/180

绘制圆弧:arc(x,y,r,startAngle,endAngle,anticlockwise);

参数:

x   圆心横坐标

y   圆心纵坐标

r    半径

startAngle   开始角度

endAngle     结束角度

anticlockwise  是否逆时针方向绘制(默认false表示顺时针,true表示逆时针)注意:在使用逆时针时,看需求是否要改变开始和结束的角度

 

  • 绘制文本

ctx.font=“微软雅黑”   设置字体

strokeText(text,x,y,maxWidth); /描边文字  fillText(text,x,y,maxWidth);/ 填充文字

    参数:

    text: 要绘制的文本

    x,y :  文本绘制的坐标(文本左下角)

     maxWidth:   设置文本最大宽度,可选参数

ctx.textAngle  文本水平对齐方式,相对绘制坐标来说(参数:left,center,right,start(默认),end)

ctx.direction 属性css(rtl,ltr)start和end相关

如果是ltr,start和left表现一致(ltr--从left到right)

如果是rtl,start和right表现一致(rtl--从right到left)

ctx.textBaseline 设置基线(垂直对齐方式)

top  文本的基线处于文本的正上方 并且有一段距离

middle  文本的基线处于文本的正中间

bottom  文本的基线处于文本的正下方,并有一段距离

hanging  文本的基线处于文本正上方,并且和文本粘合

alphabetic  默认值,基线处于文本的下方,并且穿过文字

ideographic和bottom相似,但是不一样//

measureText()  获取文本宽度obj.width

 

做动画

  • 绘制图片

drawImage();

三个参数时: drawImage(img,x,y);

  • img   图片对象,canvas对象,video对象
  • x,y    图片绘制的左上角   

五个参数时:drawImage(img,x,y,w,h);

  • img   图片对象,canvas对象,video对象
  • x,y    图片绘制的左上角  
  • w,h   图片绘制尺寸设置(图片缩放,不是截取)

九个参数时:drawImage(img,x,y,w,h,x1,y1,w1,h1);

  • img   图片对象,canvas对象,video对象
  • x,y    图片绘制的左上角  
  • w,h   图片绘制尺寸设置(图片缩放,不是截取)
  • x1,y1,w1,h1  画布中的一个矩形区域
  • 坐标变换

平移  移动画布的圆点

translate(x.y);  参数表示移动目标点的坐标

缩放  

scale(x,y);   参数表示宽高的缩放比例

旋转

rotate(angle);  参数表示旋转角度

 

参考文档:

w3school    http://www.w3school.com.cn/tags/html_ref_canvas.asp

Canvas_API   https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

 

posted on 2020-12-27 22:13  小田的日常  阅读(110)  评论(0编辑  收藏  举报

导航