(2/2)Canvas的交互&存为图片-爬坑篇

需求介绍

1. page2上的canvas可交互，并实时显示交互结果；

2. 点击下一步，page2消失，page3显示；

3. page3显示的是一张图片，图片有canvas交互区和另外的一些元素组成。

实现思路

canvas重绘

运用canvas重绘的方法可以实时同步canvas的交互结果。
canvas重绘：在canvas有交互操作时，先清空画布，将canvas中所有的元素都重新画到画布上；

var fillTextArr = function(el){
        //清空画布
        el.clearRect(0, 0, width, height);
        el.beginPath();
        
        //绘制
        
        
    };

1. 这里只需绘制封装的cavas元素对象绘制

2. 交互只需操作封装的对象，改变对象的属性，如颜色，文本等。

图片合成

思路

如下图，点击下一步时，将底部元素绘制到cavas，最后将整体canvas取出为图片显示；

合成

合成要进行的操作

1. 将交互区canvas绘制到缓存cachecanvas中

2. 将图片底部绘制到cachecanvas中

3. cacheCanvas转换为图片

1、3两点都可以用drawImage方法实现

drawImage(_image_, _x_, _y_)
drawImage(_image_, _x_, _y_, _width_, _height_)
drawImage(_image_, _sourceX_, _sourceY_, _sourceWidth_, _sourceHeight_,
          _destX_, _destY_, _destWidth_, _destHeight_)
//第一个参数表示 <img> 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。

注：src为base64编码的img对象，在微信ios客户端中，被用做drawImage的第一个参数时，不会绘制到canvas上，且不报错

canvas转换成图片

//取出canvas的Base64编码
var dataImg = canvas.toDataURL('image/png');

重置page3中的<img src="" alt="" id="result"/>；
img标签可以解析base64编码为图片

$('#result').attr('src', dataImg);

BugList

微信中toDataURL的同源限制

微信中执行var dataImg = canvas.toDataURL('image/png');此条语句时，当前的canvas中的图片，不能有跨域的图片资源，例如：

var img = new Image();
img.src = "跨域的图片地址"；
img.onload = fucntion(){
   canvas.drawImage(img,0,0,100,100);
}

//在微信中时，本行代码不执行。
var dataImg = canvas.toDataURL('image/png');

微信长按保存失败

1. 微信安卓客户端长按保存base64编码格式的图片时，保存失败

2. ios长按保存正常
   解决：将base64编码给后台，后台处理成jpg等常用格式的图片，返回图片保存的地址。

ios点击闪烁

原因：移动端click事件造成；
参考信息

解决办法

给canvas添加样式

canvas {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

换成touch事件

由于使用的判断点击位置的方法依赖于:layerX 、layerY、offsetX、offsetY

var getEventPosition =  function(ev){
        var x, y;
        if (ev.layerX || ev.layerX == 0) {
            x = ev.layerX;
            y = ev.layerY;
        } else if (ev.offsetX || ev.offsetX == 0) { // Opera
            x = ev.offsetX;
            y = ev.offsetY;
        }
        return {x: x, y: y};
    };

touch事件对layerX 、layerY、offsetX、offsetY支持测试如下(此处未深究，仅供参考)：

1. ios微信 touchstart的e.touches[0]支持，安卓不可以

2. 微信，ios、安卓都的click都支持上述函数，都有延迟，但是ios会闪烁

3. 微信，ios、安卓的tap都不支持上述事件

文中若有错误，还请各位大侠及时告知。