是否可以在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/