如何解决canvas绘图位置偏离的问题

2024-10-26 百科资讯

本文小编为大家详细介绍“如何解决canvas绘图位置偏离的问题”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何解决canvas绘图位置偏离的问题”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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

例如：

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>Untitled1</title><styletype="text/css">.style1{font-size:x-small;}</style></head><body><div><divid="test"><canvasid="container"onmousemove="mousemove(event)"onmousedown="mousedown()"onmouseup="mouseup()"></canvas></div></div><scripttype="text/javascript">varpaint=false;varstart=false;varcanvas=document.getElementById("container");canvas.width=800;canvas.height=800;varoffsetY=canvas.offsetTop;varoffsetX=canvas.offsetLeft;vary;varx;varcontext=canvas.getContext("2d");functionmousemove(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();}}functionmousedown(event){paint=true;console.log("down")}functionmouseup(event){paint=false;console.log("up")}</script></body></html>

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

如果更改为：

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

读到这里，这篇“如何解决canvas绘图位置偏离的问题”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。