是否可以在Framer JS中使用'畫布'繪圖功能？

Question

我已成功地創建和canvas元素添加到FramerJS原型：

myCanvas = document.createElement "canvas" 
myCanvas.setAttribute("width","750px") 
myCanvas.setAttribute("height","500px") 
myCanvas.setAttribute("style","border: 2px solid black; background: #CCC") 

container = new Layer 
    height: 1334 
    width: 750 
    backgroundColor: "white" 
    html: myCanvas.outerHTML 
ctx = myCanvas.getContext "2d" 

ctx.fillStyle = "blue" 
ctx.fillRect(0, 0, 50, 50) 

如果你print(ctx)它顯示了一個有效CanvasRenderingContext2D作爲輸出。問題是，原型沒有任何反應。它仍然是空白 - 就像從未調用過fillRect函數一樣。

需要確認是否這樣做是因爲缺乏支持或者我做錯了什麼。

Answer 1

通過將圖層的html設置爲canvas HTML，您將失去對所創建畫布的引用。所以fillRect被調用，而不是在畫布上，你實際看到:)

如果刪除html財產，而是做：

container._element.appendChild(myCanvas) 

到你的畫布引用保持和你實際借鑑顯示的畫布。

完整的示例：

myCanvas = document.createElement "canvas" 
myCanvas.setAttribute("width","750px") 
myCanvas.setAttribute("height","500px") 
myCanvas.setAttribute("style","border: 2px solid black; background: #CCC") 

container = new Layer 
    height: 1334 
    width: 750 
    backgroundColor: "white" 

container._element.appendChild(myCanvas) 
ctx = myCanvas.getContext "2d" 

ctx.fillStyle = "blue" 
ctx.fillRect(0, 0, 50, 50) 

成幀器項目：http://share.framerjs.com/v4a1eyjv806s/