0

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関数が呼び出されなかったように、空白のままです。

これがサポート不足によるものなのか、それとも私が何か間違っているのかを確認する必要があります。

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 に答える