(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轉換爲圖片

一、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都不支持上述事件

文中如有錯誤，還請各位大俠及時告知。