canvas 绘图时职位恰恰离的标题处置

来源：互联网知识问答 2025-10-30 04:12:41 1

这篇文章主要介绍了canvas 绘图时位置偏离的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

使用 canvas 绘图时，指定的 p 大小一定不要超过该 p 所能获得的最大范围，否则绘制的点会跟实际位置发生偏离。

例如

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
font-size: x-small;
}
</style>

</head>

<body >
<p style="margin:2%">
<pstyle="width:800px;height:800px;background-color:#cbdad0d9">
<canvasonmousemove="mousemove(event)" onmousedown="mousedown()" onmouseup="mouseup()"></canvas>
</p>
</p>

<ｓｃｒｉｐｔ type="text/javascript">
var paint = false;
var start = false;
var canvas = document.getElementById("container");
canvas.width = 800;
canvas.height = 800;
var offsetY = canvas.offsetTop;
var offsetX = canvas.offsetLeft;
var y;
var x;
var context = canvas.getContext("2d");

function mousemove(e) {
if (paint == true){
if (start == false){
context.moveTo(0, 0);
start = true;
} else {
context.moveTo(x, y);
}

x = e.pageX - offsetX;
y = e.pageY - offsetY;
context.lineTo(x, y);
context.stroke();
}
}

function mousedown(event) {
paint = true;
console.log("down")
}

function mouseup(event) {
paint = false;
console.log("up")
}

</ｓｃｒｉｐｔ>
</body>
</html>

上例中可以正确的绘制线图。

如果更改为：

由于canvas所需width 800px无法满足，因此绘制线图时，与实际鼠标位置发生偏离。

来源：本站

链接：https://www.jb51.net/html5/745325.html

本文地址：https://www.xiaodianwang.com/b/198026.html

免责声明：本站内容仅用于学习参考，文字信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）