2018-01-16 canvas刮刮卡引发的各种问题

Canvas 刮刮卡引发的问题

效果

最近在写一个移动端刮奖页面，本身很简单，网络上也有许多过程，但有许多坑需要说一下。

'destination-out' 造成图片无法渲染

网页上的刮奖教程大部分的图层都是固定颜色：

ctx.beginPath();
ctx.fillStyle = "silver"; //银色图层
ctx.rect(0, 0, width, height);
ctx.closePath();
ctx.fill();

但我做的刮层是小图标拼接的大图片，如果在一开始就设置

ctx.globalCompositeOperation = 'destination-out';

那么图片和刮层的重合部分会消除，无法实现效果。
解决方法：将设置写在触摸过程中

myCanvasObject.addEventListener(tapmove, function (event) {
  var e = window.event || event;
  if (isDown) { //判断鼠标是否按下
  ctx.globalCompositeOperation = 'destination-out';
  ...
});

这样只有触摸后才会开始重合消除的功能

canvas 领奖按钮被遮挡

刮完图层后会显示领奖按钮，但canvasDOM元素遮挡了领奖按钮。这时需要将canvasDOM元素从页面中删除。那么需要判断图层刮到某个程度（某个百分比）后将canvas元素删除。这就需要获取画布中的所有像素，像素的透明度小于某个值的时候就将判断为透明。这就需要使用 getImageData 方法

canvas getImageData方法跨域

为了获取画布中的所有像素，需要使用getImageData。然而canvas获取图片的像素信息时，有跨域的问题：

浏览器报错

解决办法有：

1. 服务端设置cors
   然而一般不会仅为一张图片就设置cors。
2. 将图片地址转为base64的格式
   利用canvas可以很方便的将图片转为base64格式

function getBase64(url){
  var img = new Image(),
        dataURL='';
  img.src=url;
   //确保图片加载完成
  img.onload=function(){
    // 创建canvas元素
    var canvas = document.createElement("canvas"),
    // 确保canvas的尺寸和图片一样
    width=Img.width,
    height=Img.height;
    canvas.width=width;
    canvas.height=height;
    canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
    dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
    return dataURL;
    };
  }

触摸坐标偏移

我是利用e.touches[0]的pageX 和offsetLeft等进行坐标的获取，这是就不能在canvas的父元素设置position，否则触摸会出现错位