>

Animate CC의 제작 출력은 html 파일과 js 파일을 제공합니다. 같은 캔버스에 같은 그림을 두 번 그려보고 싶습니다. 이 예 에서

두 개의 캔버스 태그없이 자바 스크립트를 변경하려면 어떻게해야합니까? 단일 캔버스 태그에 여러 인스턴스를 갖고 싶습니다.

  • 답변 # 1

    위의 이미지를 얻으려고한다면 simple_canv 의 두 인스턴스를 만들면됩니다.  수업.

    이것을 시도하십시오 :

    var canvas, stage, exportRoot;
    function init() {
     canvas = document.getElementById("canvas");
     exportRootLeft = new lib.simple_canv();
     exportRootRight = new lib.simple_canv();
     exportRootRight.x = 555;
     stage = new createjs.Stage(canvas);
     stage.addChild(exportRootLeft, exportRootRight);
     stage.update();
     stage.enableMouseOver();
     createjs.Ticker.setFPS(lib.properties.fps);
     createjs.Ticker.addEventListener("tick", stage);
    
     init_app()
    
    

    }

    또한 캔버스 너비를 늘려야합니다.

  • 답변 # 2

    이것이 당신이 찾고있는 것입니까?

    <!DOCTYPE html>
    <html>
        <body>
            <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
                Your browser does not support the canvas element.
            </canvas>
            <script>
                var canvas = document.getElementById("myCanvas");
                var ctx1 = canvas.getContext("2d");
                var ctx2 = canvas.getContext("2d");
                ctx1.fillStyle = "red";
                ctx1.fillRect(0,0,50,50);
                ctx2.fillStyle = "blue";
                ctx2.fillRect(50,0,50,50);
            </script>
        </body>
    </html>
    
    

    그러면 렌더링 내용을 변경할 수 있습니다.

  • 이전 javascript - 3면 JS에 삼각형을 그리는 방법?
  • 다음 javascript - ajax 호출로 Google지도에서 폴리 라인 색상을 변경하는 방법은 무엇입니까?