javascript - Canvas - 路径看起来像是放大的

Question

我在 Canvas 上创建了一条贝塞尔曲线路径。尽管 Canvas 足够宽，但路径却无法容纳其中。看起来路径好像被放大了。出了什么问题？ jsfiddle

JS

var canvas, context;

init();

function init() {

 canvas = document.getElementById("myCanvas");


context = canvas.getContext("2d");



context.fillStyle = 'rgb(245,245,245)';
context.fillRect( 0, 0, 420, 256 );

context.beginPath();
context.moveTo(10, 70);

context.bezierCurveTo(160, 50, 240, 50, 400, 50);
context.lineWidth=4;
context.stroke();

}

Answer 1

您需要在canvas元素上声明宽度和高度属性。现在你有一个默认大小的 Canvas ，它是按 css 缩放的，这就是它看起来放大的原因。

<canvas width="440" height="256" ></canvas>