這是因?yàn)镠5素材的分層導(dǎo)致的，假如長(zhǎng)按的區(qū)域里有多層PNG素材堆砌，保存下來的可能是最頂層的某張PNG。而iH5的畫布功能本質(zhì)上是能將整幅圖片拷貝到Canvas里，讓圖片得以按照指定區(qū)域進(jìn)行封裝打印。

具體操作如下：

(1)將需要打印的圖片內(nèi)容放置在畫布下

(2)在指定區(qū)域放置一個(gè)空白圖片作為容器

打印畫布內(nèi)容至該空白圖片上

緊接著，我們只需對(duì)某個(gè)按鈕設(shè)置畫布打印事件觸發(fā)即可。

值得提醒的是：

(1)需要打印的內(nèi)容必須全部放置在畫布下。

(2)打印前，必須調(diào)整好空白圖片的尺寸和位置，這些參數(shù)會(huì)直接影響圖片打印的效果。

(3)畫布功能除了可以打印圖片，還可以用于復(fù)雜時(shí)間軸動(dòng)畫等內(nèi)容的WebGL加速優(yōu)化。(將時(shí)間軸放置在畫布下)

以上就是該SSR生成器在工具iH5制作的交互應(yīng)用教程啦，這三類交互都比較實(shí)用，想必發(fā)揮空間還有很多。

如果在交互實(shí)現(xiàn)上還有其他不懂的，就給筆者留言吧~

不說了，我要去朋友圈曬我的9個(gè)SSR了，各位拜拜~