画布 - 路径看起来像放大

Question

我在画布上创建了一个bezier路径。虽然画布足够宽，但路径不适合它。看起来好像路径已经放大了。出了什么问题？ 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元素上声明width和height属性。现在你有一个默认大小的画布，它被缩放为css，这就是它看起来缩放的原因。

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