为什么数字在画布上显得扭曲？

我正在玩HTML5画布，我遇到了一些奇怪的行为。我正在做基于以下三个步骤的基础动画：为什么数字在画布上显得扭曲？

我调用内部的update（）函数，以便更改对象的x和y。
我用这行代码清除画布this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
我重绘了所有的元素。

我这是怎么得出的数字：

// drawing a circle 
function drawCircle(x,y) { 
    var rad = 5; 
    ctx.beginPath(); 
    ctx.arc(x, y, rad, 0, 2 * Math.PI); 
    ctx.closePath(); 
    ctx.fill(); 
} 

// and a rect 
function drawRect(x, y,) { 
    var width = 60, 
     height = 10; 
    ctx.fillRect(x, y, width, height); 
}

现在，我希望我的矩形设置为60像素的宽度和高度10px的。我在<canvas>标签后面添加了一个div，并将其宽度和高度分别设置为60px和10px，以便说明差异。正如你可以看到的图片，显然我的矩形不是60х10。这同样适用于这个圈子。我在这里错过了什么？ enter image description here

here是小提琴

来源

2014-04-05 dKab

请添加小提琴。根据我的经验，你还必须添加'canvas.attr（'width'）= 60; canvas.attr（'height'）= 10;'。这似乎解决了我的问题。 – Anubhav

你的'

@PaulS。 #game_field { width：500px; height：500px; 边框：1px纯黑色; } – dKab

设置画布的使用它的尺寸是宽度和高度属性（标记）或属性（在JS）：

<canvas id="..." width=400 height=400></canvas>

在JS：

canvasEl.width = 400; 
canvasEl.height = 400;

请勿使用CSS，因为这只会影响画布元素但不是它的位图（将画布视为图像）。画布的默认大小为300 x 150像素。如果你不改变这个尺寸，它会被拉伸到你使用CSS设置的尺寸。这就是为什么我们一般不推荐使用CSS（有些情况下虽然有些特殊情况，例如打印情况，非1：1像素宽高比等等CSS）。

来源

2014-04-05 16:50:43 K3N

也许这是因为你的风格你的画布与/高度costum。一个画布的默认宽度/高度是150 * 300，如果你不能很好地缩放，你会得到如你所见的结果。

drawImage(image, x, y, width, height) 
    This adds the width and height parameters, which indicate the size to which to 
    scale the image when drawing it onto the canvas.

所以要简短，你必须缩放你的图纸。

the Canvas element on MDN

Canvas drawing on MDN

来源

2014-04-05 13:13:29 EdoPut

为什么数字在画布上显得扭曲？

回答

相关问题