canvas基础

Posted 2020-08-13 程序猿1990

绘制矩形的四种方式:
1.手动绘制
2.使用canvas提供的绘制矩形API,
ctx.rect(x,y,width,height);
ctx.stroke();
参数分别表示,x轴坐标,y轴坐标,矩形宽度,矩形高度
3.ctx.strokeRect(x,y,width,height);
参数同上
4.ctx.strokeRect(x,y,width,height);
参数同上
第3,4种方法只能绘制当前的矩形,如果ctx已经有一些路径,也不会去描边或者填充

清除矩形
ctx.clearRect(x,y,width,height);只能清除矩形的形状,如果用来清除stroke绘制的矩形注意还是会残留边框
清除整个画布的两种方法:
1.ctx.clearRect(0,0,cv.width,cv.height);
2.cv.width=cv.width;

矩形运动的案例
需要先定义一些变量
var startX=100,startY=100,step=1,width=100,height=100;
设置定时器var timerId=setInterval(function(){
清除画布,清除上一次画的矩形 ctx.clearRect(0,0,cv.width,cv.height);
开启新路径,否则最后一遍填充会把之前的路径全填充上ctx.beginPath();
判断有没有到目标值if(startX>=500){
startX=500;
清除定时器 clearInterval(timerId);
}
每次重新画一个新的矩形ctx.rect(startX,startY,width,height);
ctx.fill();
矩形的位置每次都往前移动一点 startX+=step;
},10)
通过上面的步骤,让人视觉上觉得是矩形移动的动画

使用apply方法求最大值,
随便弄一个数组var tempData = [ 20, 35, 38, 42, 55, 88, 99, 20, 88 ];
var maxNum=Math.max.apply(null,tempData);得到最大值
此处apply的作用:1.借用方法 2.将apply方法的第二个参数(数组或伪数组)中的元素一个个的取出来,相当于Math.max(20, 35, 38, 42, 55, 88, 99, 20, 88 );的效果

绘制圆弧的方法,也是在描绘路径
ctx.arc(x0,y0,radius,startRadian,endRadian,counterclockwise)
参数1:圆心的x坐标
参数2:圆心的y坐标
参数3:半径
参数4:起始的弧度
参数5:结束的弧度
参数6:顺时针或逆时针,默认顺时针
弧度和角度的关系:用PI表示弧度,一个PI表示180度
JS中一般使用Math.PI来获取到,Math.PI===180度;
角度angle和弧度radian的关系:angle/180=radian/Math.PI
由此可以封装两个函数:
弧度转角度function toAngle(radian){
return radian/Math.PI*180;
}
角度转弧度function toRadian(angle){
return angle/180*Math.PI;
}
练习:绘制-60度到120度的圆弧
ctx.arc(200,200,100,toRadian(-60),toRadian(120));