Question

我已经设法为FramerJS原型创建并添加canvas元素：

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设置为画布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)

Framer项目：http://share.framerjs.com/v4a1eyjv806s/

是否可以在Framer JS中使用'canvas'绘图功能？

1 个答案: