其实这个问题,一直以来都不是问题,因为以前用canvas做的擦除都是针对手机满屏幕来擦除,所以一直没有踩到这个坑~~~
网络上的擦除效果其实写的都挺泛泛的,没有特别详细的,这里给你们贴一下擦除的源代码,顺便把坑也给你们先预填了,嘿嘿。
这里面最大的坑就是,如果只是擦除一小部分的时候,你就需要将canvas进行定位移动,但是移动后,canvas里的画笔也会进行一起位移。所以在canvas移动后,需要给画笔重新定位,定回到原点上。重点是三个命令
.save()
.translate()//让画笔回原点
.restore()
window.onload=function(){ //下面是刮刮卡的内容 var canvas = document.getElementById("myCanvas"); var pmk = $(window).width(); var pmg = $(document).height(); //$('#myCanvas').attr("width",pmk*0.7); //$('#myCanvas').attr("height","40px"); canvas.width = pmk*0.7; canvas.height = 45; var cxt = canvas.getContext("2d"); var img = new Image(); img.onload = function(){ cxt.drawImage(img,