Question

//JQUERY
    d = $("#gpart");
    w = 512; h = 326;
    d.width(w);
    d.height(h);
    $ctx = d[0].getContext("2d");
    $ctx.beginPath();
    $ctx.moveTo(100, 0);
    $ctx.lineTo(100, 100);
    $ctx.lineWidth = 1;
    $ctx.strokeStyle = '#bbbbbb';
    $ctx.stroke();
})
//PLAIN
    d = document.getElementById("gpart");
    d.width = 512;
    d.height = 326;
    ctx = d.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 100);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#bbbbbb';
    ctx.stroke();

使用jquery，坐标按比标准画布大小（例如100 =＆gt; 170+）放大。我哪里出错？

Answer 1

更新：在第二个示例中，d是canvas元素，因此您可以设置其宽度和高度。在第一个例子中，d [0]是实际的canvas元素，你应该为d [0]设置宽度和高度。看看工作示例：

http://jsfiddle.net/2jsSw/

<强>旧：这一切都很顺利，如果在jQuery版本中，这两个版本将是相同的：

d.width(w);
d.height(h);

（这些将设置画布的css宽度和高度，以像素为单位）

你使用：

d.attr('width',w);
d.attr('height',h);

对于canvas元素，width和height属性似乎指定了canvas API使用的坐标系的大小，而CSS width和height指定了在页面上绘制的canvas元素的大小。

画布坐标随jquery改变

1 个答案: