javascript - 如何将两张图片并排放置

Question

我使用 Canvas 创建了一个仪表，它在网络浏览器上完美显示。但是，我打算并排显示 2 个仪表；一个衡量标准是反射(reflect)用户交互的速度，另一个衡量标准是作为计数器的目的。此外，仪表将在开始按钮上的初始用户交互时被激活。

问题:

此时，我已经成功创建并正确显示了第一个仪表。因此，为了创建 2 个 Canvas 图像，我创建了 2 <canvas>标签，当我创建第二个时 <script>第二个标签 <canvas> , 第二个 Canvas 图像叠加在第一个上 <canvas>标签。因此，我将无法看到第一个 Canvas 图像。

因此，我想请教如何使2个 Canvas 图像并排？

代码: 我已经删除了 <script>创建第二个 Canvas 的代码，开始时可能不正确，因此我已将其删除。

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); 
        }

Answer 1

你还没有给你的第二个 Canvas 任何样式。

让它们都成为inline-block，它们将紧挨着。

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

我添加了一个红色轮廓，这样您就可以看到第二个 Canvas 容器确实存在并且在您将它们制成内联 block 后紧挨着另一个。

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

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