Canvas 为什么在错误的地方绘制图像？

下面的代码尝试从工具栏中选择的按钮将图像绘制到鼠标位置的画布中。根据打印的坐标正确计算位置，但图像放置在错误的位置。 守则：

导入'dart:html'；
课堂测试{
ImageElement工具栏\所选\元素=null；
画布元素画布；
num mouseX=null，mouseY=null；
void main（）{
canvas=查询（“#canvas”）；
canvas.onClick.listen（canvas\u onClick）；
对于（queryal中的var toolbutton（'.toolbutton'））{
toolbutton.onClick.listen（（e）=>toolbar\u selected\u element=query（“#${e.target.id}”）；
}
}
void canvas\u OnClick（MouseEvent事件）{
数值x，y；
var clientBoundingRect=canvas.getBoundingClientRect（）；
mouseX=event.clientX-clientBoundingRect.left；
mouseY=event.clientY-clientBoundingRect.top；
window.requestAnimationFrame（绘制）；
}
无效绘图（数值）{
CanvasRenderingContext2D上下文=canvas.context2d；
clearRect（0，0，canvas.width，canvas.height）；
如果（工具栏所选元素！=null&&mouseX！=null&&mouseY！=null）{
打印（“$mouseX$mouseY”）；
drawImage（工具栏\所选\元素、mouseX、mouseY）；
}
}
}
void main（）{
新测试（）.main（）；
}

相应的html文件可在以下位置找到：

---

问题在于，您正在将CSS样式

宽度

和

高度

设置为画布实际宽度和高度以外的值。有关更多详细信息，请参阅

如果确实希望画布维度的规范源位于CSS文件中，可以执行以下操作：

void main（）{
canvas=查询（“#canvas”）；
canvas.width=int.parse（canvas.getComputedStyle（）.width.split（'px'）[0]）；
canvas.height=int.parse（canvas.getComputedStyle（）.height.split（'px'）[0]）；

我希望有一种更优雅的方式来剥离“px”，但这是我想到的第一件事