0

我设法创建了一个画布元素并将其添加到 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从未调用过该函数一样。

需要确认这是因为缺乏支持还是我做错了什么。

4

1 回答 1

1

通过将图层的 html 设置为画布 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/

于 2016-09-02T12:36:16.793 回答