Question

我试图制作两个彼此重叠的独立画布元素而不会干扰它们。

这是我的代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Dodge 'n Block</title>
</head>
<body>
    <canvas id="myCanvas1">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    <canvas id="myCanvas2">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script type="text/javascript" src="cordova.js">   </script>
    <script type="text/javascript" src="js/index.js">  </script>

</body>

的Javascript

var c1 = document.getElementById("myCanvas1");
var ctx1 = c1.getContext("2d");

var c2 = document.getElementById("myCanvas2");
var ctx2 = c2.getContext("2d");

现在当我尝试ctx2.clearRect(0, 0, c2.width, c2.height);时，它会清除整个画布，包括画布c1，ctx1。

我有办法做到这一点吗？

随时提出任何问题，谢谢！

HTML Canvas - 如何在没有关联的情况下重叠多个Canvas图层？

0 个答案: