javascript - html/javascript Canvas 高度/宽度坐标不一样？

Question

由于某种原因，高度和宽度似乎彼此不同，这里是一个例子: 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 不一样？谢谢。

Answer 1

您的 Canvas 不够大，无法显示整个矩形，它在 Canvas 底部被切断，这就是为什么它看起来不够高

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>

specification for HTML5 explicitly指出:

The width attribute defaults to 300, and the height attribute defaults to 150.