canvas&

Posted 2020-08-14 程序猿1990

canvas中可以将绘制的内容转换为图片,然后将图片设置为canvas画布的背景
先在画布中绘制需要设置成背景的内容,然后
var dataURL=cv.toDataURL("image/jpg",1);//第一个参数表示图片格式. 第二个参数表示图片质量,1表示无损画质...作用是把canvas画布转化为base64编码的字符串

绘制刮刮乐等案例,做出刮开的效果,需要使globalCompositeOperation属性,destination-out表示将新绘制的内容与原来的内容的重叠部分变为透明,globalCompositeOperation的默认值为source-over

获取画布离屏幕距离的方法var posObj=getBoundingClientRect();
posObj.left可以获取到画布与左屏幕的距离,event.clientX-posObj.left就是点在画布中的x方向位置

判断画布中的点是否在某个路径中
先画出某个路径
然后ctx.isPointInPath(x,y);返回一个boolean值

canvas绘制视频:
html页面上得先有个video标签,导入视频
先设置一个定时器,值设为null
绘制视频其实就是连续绘制图片,需要先添加window.onload=function(){},绘制视频的过程都写这
个函数里绘制视频有三个事件"play","pause","stop"

ctx.lineDashOffset=step;向左移

封装函数:
1.通过标签名来获取元素
var getElmsByTag=function(tagName){
return document.getElementsByTagName(tagName);
}

2.var each=function(arr,callback){
var i,length=arr.length;
for(i=0;i<length;i++){
if(callback.call(arr[i],i,arr[i])===false{
break;
}
}
};