03-25 07:19 阅读 208

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

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

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

例如

<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 > 

    <div style="margin:2%">

            <div id="test" style="width:800px;height:800px;background-color:#cbdad0d9">

                    <canvas id="container" onmousemove="mousemove(event)" onmousedown="mousedown()" onmouseup="mouseup()"></canvas>

            </div>

    </div>

    <script 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")

}

    </script>

</body> 

</html>

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

如果更改为：

1

2

3

4

5

<div style="margin:20%">

        <div id="test" style="width:800px;height:800px;background-color:#cbdad0d9">

                <canvas id="container" onmousemove="mousemove(event)" onmousedown="mousedown()" onmouseup="mouseup()"></canvas>

        </div>

</div>

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

到此这篇关于canvas 绘图时位置偏离的问题解决的文章就介绍到这了