canvas画圆弧:绘制圆弧时,只有在当前路径中没有位置(没有moveTo和lineTo操作)才能绘制出一个圆弧,如果之前已经有了位置,此时,会在当前位置与圆弧的起点连线.
ctx.arc(x0,y0,r,toRadian(angleStart),toRadian(angleEnd));
canvas绘制扇形:1.先将位置移动到圆心,2.绘制圆弧 3.closePath(),闭合
canvas绘制文字ctx.strokeText(text,x,y);或者ctx.fillText(text,x,y);区别是用stroke会画出一个类似环绕的字体,一般都用fill方式
其中第一个参数:表示要绘制的文字,传入字符串类型;第二个参数:绘制到画布中的x坐标;第三个参数:绘制到画布中的y坐标
设置字体的方式ctx.font="40px consolas";
设置字体的水平对齐方式:textAlign="center"水平居中
默认值为start,其他属性还有left和right,当文字的书写方向为往右时,start=left;当文字方向往左时,start=right;
设置字体的垂直对齐方式ctx.textBaseline="middle";垂直居中
获取字体的宽度:ctx.measureText().width
圆弧上某个点的坐标公式:x=x0+r*Math.cos(angle);y=y0+r*Math.PI.sin(angle);
其中x0,y0是圆心坐标,r为圆半径,angle是角度
绘制图片
最基础的部分:三个参数
ctx.drawImage(img,x,y);
参数一:绘制的图片(对象);参数二:绘制到画布上的x坐标;参数三:绘制到画布上的y坐标
创建图片对象的两种方式:1.使用document.creaateElement("img");
2.使用var img=new Image(); 再给img设置路径 img.src="";
注意事项:在绘制图片 时,需要等待图片加载完成之后才能绘制到画布中去,所有需要注册个事件img.onload=function(){ctx.drawImage(img,x,y);};
绘制图片的指定大小(相当于将图片放大或者缩小):五个参数
ctx.drawImage(img,x,y,width,height);
参数一:绘制的图片(对象); 参数二:绘制到画布上的x坐标; 参数三:绘制到画布上的y坐标; 参数四:绘制到画布上的图片的宽度; 参数五:绘制到画布上的图片的高度
如果想将图片按原比例画出,(绘制图片的宽度/绘制图片的高度=原图片的宽度/原图片的高度),可以给参数五设置为img.height*参数四的值/img.width
绘制图片的指定部分,就是只画出图片的一部分:九个参数
ctx.drawImage(img,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height);
参数一六七八九和上面一样
参数二:绘制图片中指定部分的顶点(左上角)x坐标; 参数三:绘制图片中指定部分的顶点(左上角)y坐标; 参数四:截取图片大小的宽度 参数五:截取图片大小的高度
序列帧动画的实现方式:1.加载图片 2.将图片的宽度和高度分割成需要的大小 3.在画布上循环展示精灵图中扣下来的几张连贯的图片,看起来就像动画
canvas中的变换
一.平移变换(用于平移画布,原点)
ctx.translate(x,y);参数1表示平移之后画布原点的x坐标或者平移画布的水平juli;参数2表示平移之后画布原点的y坐标,或者平移画布的垂直距离
让整个画布都平移,平移前的内容依旧不变
二.缩放变换
ctx.scale(scalewidth,scaleheight);参数1表示水平方向放大或缩小的倍数;参数2表示垂直方向放大或缩小的倍数
缩放变换,在缩放图形的同时,也会缩放画布
三.选择变换
ctx.rotate( radian );参数是弧度,记得把角度转换成弧度
注意:选择变换是以画布原点为中心旋转的,想让一个图形在原位旋转,需要先把原点移动到图形的中心
canvas中状态的保存和重载
保存状态:ctx.save();
绘制状态包含：strokeStyle/fillStyle/lineWidth/setLineDash/font....等
save方法的作用：是将当前所有的绘制状态保存起来
重载状态:ctx.restore();
重新加载已经保存的状态
一般情况下，save方法和restore方法需要成对出现。也就是：save一次，就restroe,多个save不会覆盖前面的,会层叠,每次restore会提取最近的那次save保存的状态(类似于栈结构特点:先进后出),
联想:瓶子里放入两个save,会先取出后放的那个save
应用:save放在一个循环的最前面,用于保存这个空的状态,restore放在循环最后面,将当前的状态恢复到 任何操作都没有处理的状态,方便下次保存