Question

我已经使用画布来创建一个仪表，它在Web浏览器上完美显示。但是，我打算展示两个并排的仪表;一个衡量标准是反映用户互动的速度，另一个衡量标准是作为柜台的目的。此外，仪表将在开始按钮上的初始用户交互时激活。

问题：

此时，我已设法创建并正确显示第一个仪表。因此，要创建2个画布图像，我创建了2个<canvas>标记，当我为第二个<script>创建第二个<canvas>标记时，第二个画布图像叠加在第一个<canvas>上。 {1}}标记。因此，我无法看到第一张画布图像。

因此，我想请求如何使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); 
        }

Answer 1

你没有给你的第二个画布任何款式。

将它们设为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;
}

Answer 2

这应该为你做的工作

<canvas id="canvas" width="300" height="300" style="float:left; display:block;">
</canvas>
<canvas id="Counter" width="300" height="300" style="float:left; display:block;">
</canvas>

如何将2张图像设置为彼此相对

2 个答案: