卡转画布绘制答案

【问题标题】：card turn canvas draw卡转画布绘制
【发布时间】：2018-05-25 00:31:03
【问题描述】：

我想让十二张卡片（图片）彼此并排朝下，并且能够在点击一张卡片时翻转它们。从十二张卡片中随机显示一张（一张图片），而不重复相同的图片两次。

此外，每当您单击一张卡片时，我都希望有一个编号画布的相应部分可供绘制。这应该一直持续到所有牌都被翻开并且所有区域都被绘制为止。

<html>
   <head>
      <title>game</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
      <!--[if IE]><script type="text/javascript" src="excanvas.js"></script>   <![endif]-->
      <script type="text/javascript" src="html5-canvas-drawing-app.js">   </script>
      <script language="javascript">
         var imagesArray = [ 'images/img-1.jpg', 'images/img-2.jpg',
         'images/img-3.jpg', 'images/img-4.jpg', 'images/img-5.jpg',
         'images/img-6.jpg', 'images/img-7.jpg', 'images/img-8.jpg',
         'images/img-9.jpg', 'images/img-10.jpg', 'images/img-11.jpg',
         'images/img-12.jpg' ];

         var usedImages = {}; var usedImagesCount = 0;

         function displayImage(){

             var num = Math.floor(Math.random() * (imagesArray.length));
             if (!usedImages[num]){
                 document.canvas.src = imagesArray[num];
                 usedImages[num] = true;
                 usedImagesCount++;
                 if (usedImagesCount === imagesArray.length){
                     usedImagesCount = 0;
                     usedImages = {};
                 }
             } else {
                 displayImage();
             } }


      </script>
   </head>
   <body>
      <table border=0 cellpadding="0" cellspacing="0">
         <tr align="center">
            <td><img src="images/blank.jpg" name="canvas" onClick="displayImage()"/></td>
         </tr>
      </table>
      <div id="canvasDiv"></div>
      <script type="text/javascript"> $(document).ready(function() {
         prepareCanvas(); });
      </script>
      <a href="#" class="button" id="btn-download" download="my-file-name.png">Save</a>
      <script language="javascript"> var button = document.getElementById('btn-download');
         button.addEventListener('click', function (e) {
             var dataURL = canvas.toDataURL('image/png');
             button.href = dataURL; });

      </script> 
   </body>
</html>

我不知道如何在开始时让所有卡片面朝下，以及如何仅选择画布的过去进行绘制。

【问题讨论】：

根据如何阅读您的帖子，要么根本没有问题，要么有多个问题。你应该重新考虑你真正想问的问题。
在最小工作示例中向我们展示您的 HTML 以及所有 javascript，以复制您现在所处的阶段。
我重新格式化了您的代码，使其像代码一样突出显示。只是为了更容易阅读。 :) Stack-overflow 喜欢 4 个空格作为引用。

标签： javascript image html5-canvas

【解决方案1】：

我认为你的问题是这一行：document.canvas.src = imagesArray[num]; 我假设你希望得到这个人：<img src="images/blank.jpg" name="canvas" onClick="displayImage()"/>，但实际上你不是这样做的。 name 属性用于表单元素。您可以使用它来命名输入产生的值，而不是 html 元素本身。我认为您想要 id 属性，我认为您应该改用 document.getElementById("canvas")。

此外，您的示例中没有实际的 html 画布。我猜prepareCanvas 插入它。您提到您只想绘制到画布的一部分。每当您绘制到 html5 画布时，它都会在已经存在的任何内容之上进行绘制。所以如果我只想画一个部分，我可以在那个部分上画，它会替换已经存在的部分，而其他所有部分都不管。如果您需要重新绘制一个部分，例如在替换之前清除其中的内容，您可以使用clearRect。还有一种叫做“掩蔽”的东西，但我认为这不是你想要的。如果你真的很绝望，你可能不得不设置一个“游戏循环”，以每秒 60 次的新状态连续重绘整个屏幕。

【讨论】：

我担心我可能不够清楚我想要什么
但随机
部分画布上的绘图是一个单独的问题。 Basically I want 12 separate canvasses to be drawn on when a corresponding card is chosen