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

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

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style type="text/css">
10         * {11             margin: 0;
12             padding: 0;
13         }
14
15         #canvas {16             border: 1px solid #000;
17             display: block;
18             margin: 10px auto;
19             width: 300px;
20             height: 300px;
21         }
22         #canvas2 {23             /*border: 1px solid #000;*/
24             display: block;
25             margin: 10px auto;
26             /*width: 300px;
27             height: 300px;*/
28         }
29         #canvas3 {30             border: 1px solid #000;
31             display: block;
32             margin: 10px auto;
33             width: 300px;
34             height: 300px;
35         }
36     </style>
37 </head>
38
39 <body>
40
41     <canvas id="canvas2" width="300" height="300" style="border:1px solid #d3d3d3;">
42
43     </canvas>
44     <canvas id="canvas3"></canvas>
45     <script type="text/javascript">
46
47
48         var canvas2 = document.getElementById("canvas2");
49         var content2 = canvas2.getContext("2d");
50
51         content2.beginPath();
52         // rect(x,y,width,height)
53         // 以0,0为原点，设置宽100，高100的矩形
54         content2.rect(0,0,100,100);
55         content2.stroke();
56
57         var canvas3 = document.getElementById("canvas3");
58         var content3 = canvas3.getContext("2d");
59
60         content3.beginPath();
61         // rect(x,y,width,height)
62         // 以0,0为原点，设置宽100，高100的矩形
63         content3.rect(0,0,100,100);
64         content3.stroke();
65
66     </script>
67 </body>
68
69 </html>

再上效果图

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

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

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

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

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

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

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

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

以上

转载于:https://www.cnblogs.com/WhiteM/p/6631821.html

Canvas坐标轴中的Y轴距离是X轴的两倍相关推荐

Python——定义一个函数，将列表中的每个值修改为前一个值的两倍（其中，第一个值为0）；
# 定义一个函数,将列表中的每个值修改为前一个值的两倍(其中,第一个值为0): def double_number(LL):L = [i*2 for i in LL if 1 == 1]L[0] = ...
Canvas 画布中坐标系的位置问题(原点确定)
Canvas在后台数据可视化中十分重要,很多时候数据都会有Canvas化成一系列类似于折线图和饼状图的形式呈现.最近在学习Canvas过程中,学到建立坐标系过程中.在确定了步骤之后,发现原点确立有个小 ...
matplotlib: 双Y轴、同一坐标轴中不同类型图、设置坐标轴刻度格式
pandas的plot函数已经可以满足很多的基本作图需求,但是其有一个比较明显缺点是不能一次性的在同一个坐标轴中画不同类型的图,比如折线图和柱状图,而且也不能设置坐标轴刻度的格式.当然这两个需求在ma ...
excel柱状图自定x轴y轴_Excel表格，如何自定义图表中的Y轴数据？，值得收藏
Excel表格,如何自定义图表中的Y轴数据?根据实际工作需要,图表中Y轴和X轴的数据有的时候需要自定义,今天教大家如何更改Y轴的数据~ 工具/材料电脑 Excel表格操作方法 01 选中表格中Y轴 ...
R语言ggplot2可视化：ggplot2中使用element_text函数设置轴标签文本粗体字体（bold text,使x轴和Y轴的标签文本都使用粗体字体）、注意是轴标签而非轴标题
R语言ggplot2可视化:ggplot2中使用element_text函数设置轴标签文本粗体字体(bold text,使x轴和Y轴的标签文本都使用粗体字体).注意是轴标签而非轴标题目录
案例分享：Qt高频fpga采集数据压力位移速度加速度分析系统（通道配置、电压转换、采样频率、通道补偿、定时采集、距离采集，导出excel、自动XY轴、隐藏XY轴、隐藏显示通道，文件回放等等）
若该文为原创文章,转载请注明原文出处本文章博客地址:https://hpzwl.blog.csdn.net/article/details/120345072 红胖子(红模仿)的博文大全:开发技术集 ...
Echart 多Y轴和多X轴
多Y轴多Y轴案例蓝色的线,对应左Y轴.绿色的线,对应右Y轴代码示例 barTwoYChart () {let newPromise = new Promise((resolve) => { ...
机器学习中的度量—— 向量距离
机器学习是时下流行AI技术中一个很重要的方向,无论是有监督学习还是无监督学习都使用各种"度量"来得到不同样本数据的差异度或者不同样本数据的相似度.良好的"度量" ...
将一串随机数输入到二维坐标轴中，不断刷新JPanel,实现动态显示的效果微笑
将一串随机数输入到二维坐标轴中,不断刷新JPanel,实现动态显示的效果 import java.awt.BasicStroke; import java.awt.BorderLayout; impo ...
x轴z轴代表的方向图片_x y z三个轴的方向 x轴、y轴和z轴分别代表的是什么？
1, x轴.y轴和z轴分别代表的是什么? 空间任意选定一点O,过点O作三条互相垂直的数轴Ox,Oy,Oz,它们都以O为原点且具有相同的长度单位.这三条轴分别称作x轴(横轴),y轴(纵轴),z轴(竖轴) ...

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

Canvas坐标轴中的Y轴距离是X轴的两倍相关推荐

最新文章

热门文章