需求介紹

page2上的canvas可交互，并實時顯示交互結果；

點擊下一步，page2消失，page3顯示；

page3顯示的是一張圖片，圖片有canvas交互區和另外的一些元素組成。

實現思路

canvas重繪

運用canvas重繪的方法可以實時同步canvas的交互結果。
canvas重繪：在canvas有交互操作時，先清空畫布，將canvas中所有的元素都重新畫到畫布上；

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

這里只需繪制封裝的cavas元素對象繪制

交互只需操作封裝的對象，改變對象的屬性，如顏色，文本等。

圖片合成

思路

如下圖，點擊下一步時，將底部元素繪制到cavas，最后將整體canvas取出為圖片顯示；

合成

合成要進行的操作

將交互區canvas繪制到緩存cachecanvas中

將圖片底部繪制到cachecanvas中

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');

微信長按保存失敗

微信安卓客戶端長按保存base64編碼格式的圖片時，保存失敗

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) { // Operax = ev.offsetX;y = ev.offsetY;}return {x: x, y: y};};

touch事件對layerX 、layerY、offsetX、offsetY支持測試如下(此處未深究，僅供參考)：

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

微信，ios、安卓都的click都支持上述函數，都有延遲，但是ios會閃爍

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

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

總結

以上是生活随笔為你收集整理的(2/2)Canvas的交互存为图片-爬坑篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。