Question

MyCanvas = document.getElementById('canvas');
MC = MyCanvas.getContext('2d');

RecProCanvas = document.getElementById('recproductioncanvas');

RPC = RecProCanvas.getcontext('2d');


function LoadCanvas() {
//Code I want to execute. (For this I usually use RCP or MC.
}

window.addEventListener("load", LoadCanvas, false);

所以我想制作两个简单的画布，但它们都不会做任何事情。在同一页面上同时使用两个画布是不可能的吗？

顺便说一句，当我想“做某事”时，我通常只想做一些简单的事情：

MC.fillRect (0, 0, 150, 50);

Answer 1

<html>
<script type="text/javascript">
window.onload=function(){
  MyCanvas = document.getElementById('myCanvas');
  MC = MyCanvas.getContext('2d');
  MC.fillStyle='blue';
  MC.fillRect(0,0,150,50);
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>

这是一个简单而完整的例子。

Answer 2

这对我有用：

我发现一个错误RPC = RecProCanvas.getcontext('2d'); getcontext都是情人。应该是getContext ...

<body>
  <canvas width="200" height="200" id="recproductioncanvas">
  </canvas>

  <canvas width="200" height="200" id="canvas">
  </canvas>

  <script type="text/javascript">
        MyCanvas = document.getElementById('canvas');
        MC = MyCanvas.getContext('2d');

        RecProCanvas = document.getElementById('recproductioncanvas');

        RPC = RecProCanvas.getContext('2d');


        function LoadCanvas() {
//Code I want to execute. (For this I usually use RCP or MC.
        }

        window.addEventListener("load", LoadCanvas, false);

        MC.fillRect (0, 0, 150, 50);
        RPC.fillRect (0, 0, 150, 50);
  </script>
</body>

html5画布不会做任何事情（我是新的）

2 个答案: