Canvas坐标轴中的Y轴距离是X轴的两倍

如题，相信很多人在初次玩canvas的时候会出现这样的情况，跟着教程走的情况下，诶

怎么画出来的东西，不怎么对劲啊，,,ԾㅂԾ,,！！！！！先上代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

         }

         #canvas {

             border: 1px solid #000;

             display: block;

             margin: 10px auto;

             width: 300px;

             height: 300px;

         }

         #canvas2 {

             /*border: 1px solid #000;*/

             display: block;

             margin: 10px auto;

             /*width: 300px;

             height: 300px;*/

         }

         #canvas3 {

             border: 1px solid #000;

             display: block;

             margin: 10px auto;

             width: 300px;

             height: 300px;

         }

     </style>

 </head>

 <body>

     <canvas id="canvas2" width="300" height="300" style="border:1px solid #d3d3d3;">

     </canvas>

     <canvas id="canvas3"></canvas>

     <script type="text/javascript">

         var canvas2 = document.getElementById("canvas2");

         var content2 = canvas2.getContext("2d");

         content2.beginPath();

         // rect(x,y,width,height)

         // 以0,0为原点，设置宽100，高100的矩形

         content2.rect(0,0,100,100);

         content2.stroke();

         var canvas3 = document.getElementById("canvas3");

         var content3 = canvas3.getContext("2d");

         content3.beginPath();

         // rect(x,y,width,height)

         // 以0,0为原点，设置宽100，高100的矩形

         content3.rect(0,0,100,100);

         content3.stroke();

     </script>

 </body>

 </html>

再上效果图

Canvas坐标轴中的Y轴距离是X轴的两倍

两段代码都是一样的，为什么会出现自己画的矩形，高是宽的两倍呢！！！

我在网上找了以下，发现有人是这么解释的

attr设置的height/width（比如<canvas height=100/>），是实际有多少像素；

而通过css设置的height，表示显示出来的大小，并不会影响原本的像素数。

你的css的height和真实的height不匹配的话，就会出现scale（缩放扩大）的问题

可以从我的两段代码中看出来

我自己的写的样式是在CSS里面，而教程里的代码是直接写在canvas里面的

也就是说css定义的样式只是外观，canvas的大小还得在属性中定义。

以上

秒客网

Canvas坐标轴中的Y轴距离是X轴的两倍

相关文章