javascript - 如何将2张图像设置为彼此并排

我已经使用画布来创建量规，并且它可以完美地显示在网络浏览器中。但是，我计划显示2个彼此并排的压力表。一个衡量标准是反映用户交互的速度，另一个衡量标准是作为计数器的目的。此外，将在开始按钮上的初始用户交互时激活仪表。

问题：

此时，我已经设法创建并正确显示了第一个量规。因此，要创建2个画布图像，我创建了2个<canvas>标签，并且当为第二个<script>创建第二个<canvas>标签时，第二个画布图像将叠加在第一个<canvas>标签上。因此，我将看不到第一个画布图像。

因此，我想寻求有关如何使2个画布图像彼此并排的帮助？

码：
我删除了用于创建第二个画布的<script>代码，开始时可能不正确，因此我将其删除了。

的HTML

 <canvas id="canvas" width="300" height="300">
 </canvas>
 <canvas id="Counter" width="300" height="300">
 </canvas>

的CSS

 #canvas {
           display: block;
           width: 300px;
           margin: 100px auto;
 }
 /*Custom font for numbers*/
 @font-face {
           font-family: "bebas";
 }

JAVASCRIPT

window.onload = function(){
           //canvas initialization
           var canvas = document.getElementById("canvas");
           var ctx = canvas.getContext("2d");
           //dimensions
           var W = canvas.width;
           var H = canvas.height;
           //Variables
           var degrees = 0;
           var new_degrees = 0;
           var difference = 0;
           var color = "#ffa500"; //green looks better to me
           var bgcolor = "#654321";
           var text;
           var animation_loop, redraw_loop;

           function init()
           {
              //Clear the canvas everytime a chart is drawn
              ctx.clearRect(0, 0, W, H);

              //Background 360 degree arc
              ctx.beginPath();
              ctx.strokeStyle = bgcolor;
              ctx.lineWidth = 30;
              ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false); //you can see the arc now
              ctx.stroke();

              //gauge will be a simple arc
              //Angle in radians = angle in degrees * PI / 180
              var radians = degrees * Math.PI / 180;
              ctx.beginPath();
              ctx.strokeStyle = color;
              ctx.lineWidth = 30;
              //The arc starts from the rightmost end. If we deduct 90 degrees from the angles
              //the arc will start from the topmost end
              ctx.arc(W/2, H/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false);
              //you can see the arc now
              ctx.stroke();

              //Lets add the text
              ctx.fillStyle = color;
              ctx.font = "50px bebas";
              text = Math.floor(degrees/360*100) + "ms";
              //Lets center the text deducting half of text width from position x
              text_width = ctx.measureText(text).width;
              //adding manual value to position y since the height of the text cannot be measured easily. There are hacks but we will keep it manual for now.
              ctx.fillText(text, W/2 - text_width/2, H/2 + 15);
               }

           function draw()
           {
              //Cancel any movement animation if a new chart is requested
              if(typeof animation_loop != undefined) clearInterval(animation_loop);

              //random degree from 0 to 360
              new_degrees = Math.round(Math.random()*360);
              difference = new_degrees - degrees;
              animation_loop = setInterval(animate_to, 1000/difference);
           }

           //function to make the chart move to new degrees
           function animate_to()
           {
              //clear animation loop if degrees reaches to new_degrees
              if(degrees == new_degrees)
              clearInterval(animation_loop);

              if(degrees < new_degrees)degrees++;
              else
                  degrees--;

              init();
           }

           //Lets add some animation for fun
           draw();
            //Draw a new chart every 2 seconds
           redraw_loop = setInterval(draw, 2000);
        }

最佳答案

您没有给第二个画布任何样式。

将它们都设为inline-block，它们将彼此相邻。

http://jsbin.com/vabevadoto/edit?html,css,js,output

我添加了一个红色的轮廓，这样您就可以看到第二个画布容器确实在其中，并且一旦将它们放入内联块中，就在另一个画布容器的旁边。

 #canvas {
           display: inline-block;
           width: 300px;
           margin: 100px auto;
 }

#Counter {
  display: inline-block;
  width: 300px;
  margin: 100px auto;
  outline: 1px solid red;
}