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>
    

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

如果更改为：

    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 绘图时位置偏离的问题解决的文章就介绍到这了,更多相关canvas 绘图位置偏离内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！