Html /javascript画布高度/宽度坐标不一样

html/javascript canvas height/width coordinates not the same?

本文关键字：坐标 不一样 高度 javascript 布高度 Html      更新时间：2023-09-26

由于某些原因，高度和宽度似乎不一样，这里有一个例子:https://jsfiddle.net/Lo2hgg54/

javascript 

var canvas=document.getElementById("canvass");
var canv=canvas.getContext("2d");
canv.beginPath();
canv.rect(100,100,200,200);
canv.fillStyle="green";
canv.fill();

html 

<canvas id="canvass">
</canvas>
有人能解释为什么200width和200height不一样吗?谢谢。

你的画布不够大，不足以显示整个矩形，它在画布的底部被截断了，这就是为什么看起来不够高

var canvas=document.getElementById("canvass");
var canv=canvas.getContext("2d");
canv.beginPath();
canv.rect(100,100,200,200);
canv.fillStyle="green";
canv.fill();
<canvas id="canvass" height="500" widht="500">
</canvas>

HTML5规范明确规定:

width属性默认为300,height属性默认为300150 .

问题是画布被截断了。如果你使用Chrome的调试工具，你可以看到画布的尺寸是300x150px(默认值)。

试着让你的画布像这样:

<canvas id="canvass" height="300"></canvas>
相关文章：