将画布从左向右移动是不平稳和快速的

Moving a canvas from left to right is not smooth and fast

本文关键字：移动 右移      更新时间：2023-09-26

我想把一个画布移动到另一个画布上。当顶部画布移动时，基本画布显示它的x和y。事件最初开始于鼠标向下。所以按下鼠标并开始移动，画布从右向左平滑移动，而不是从左向右。

http://jsfiddle.net/happyomi/23PL3/3/

<head>
    <style type="text/css">
        body, html {
            margin: 0;
        }
        canvas {
            position: absolute; 
            /* top: 0;
            left: 0;*/
        }
        #temp {
            background-color: pink;
        }
    </style>
</head>
<body style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">
    <canvas id="myCanvas" style="display: block;">
            Your browser does not support the HTML5 canvas tag.
    </canvas>
    <canvas id="temp" style="position: relative">
            Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var hgap = 0;
        var vgap = 0;
        var rows, cols;
        var annotation_x = 1;
        var row = 0; var col = 0;
        //ctx.font = "14px Arial";
        c.width = $(document).width();
        c.height = $(document).height();
        var t = document.getElementById("temp");
        tctx = t.getContext("2d");
        // tctx.lineWidth = 10;
        tctx.lineJoin = 'round';
        tctx.lineCap = 'round';
        tctx.strokStyle = 'red';
        var mouse = { x: 0, y: 0 };
        c.addEventListener('mousemove', function (evt) {
            mouse.x = evt.pageX;
            mouse.y = evt.pageY;
        }, false);
        c.addEventListener('mousedown', function (evt) {
            //    tctx.clearRect(0, 0, c.width, c.height);
            evt.preventDefault();
            ctx.clearRect(0, 0, c.width, c.height);
            tctx.clearRect(0, 0, c.width, c.height);
            mouse.x = evt.pageX;
            mouse.y = evt.pageY;
            t.style.left = mouse.x + "px";
            t.style.top = mouse.y + "px";
            t.style.position = "absolute";
            str = "x=" + mouse.x + "  y=" + mouse.y;
            ctx.fillText(str, 10, 10);
            c.addEventListener('mousemove', onPaint, false);
        }, false);
        var onPaint = function () {
            ctx.clearRect(0, 0, c.width, c.height);
            tctx.clearRect(0, 0, t.width, t.height);
            t.style.left = mouse.x + "px";
            t.style.top = mouse.y + "px";
            t.style.position = "absolute";
            str = "x=" + mouse.x + "  y=" + mouse.y;
            ctx.fillText(str, 10, 10);
        }
        c.addEventListener('mouseup', function () {
            c.removeEventListener('mousemove', onPaint, false);
        }, false); 
    </script>
</body>

这是一个很好的起点:)它做你想要的。jsFiddle 

/* Main Canvas */
var main = document.getElementById('main');
main.width = window.innerWidth;
main.height = window.innerHeight;
var mainCtx = main.getContext('2d');
var mainFill = '#000';
mainCtx.fillStyle = mainFill;
mainCtx.rect(0,0,main.width,main.height);
mainCtx.fill();
 /* secondary canvas */
var cv = document.createElement('canvas');
cv.style.position = 'absolute';
cv.width = '200';
cv.height = '100';
cv.style.left = '0px';
cv.style.top = '0px';
var ctx = cv.getContext('2d');
var fillRect = '#ccc';
var fillText = '#000';
ctx.fillStyle = fillRect;
ctx.rect(0,0,cv.width,cv.height);
ctx.fill();
//draw this canvas to main canvas
mainCtx.drawImage(cv,parseInt(cv.style.left),parseInt(cv.style.top));
var isHolding = false;
var mDown = function(e)
{
    isHolding = true;
    main.addEventListener('mousemove',mMove);
}
var mMove = function(e)
{
    console.log('moving');
    if(isHolding)
    {
         var xPos = e.pageX;
         var yPos = e.pageY;
         cv.style.left = (xPos-(cv.width/2))+'px';
         cv.style.top = (yPos-(cv.height/2))+'px';
         cv.width = cv.width; //clears canvas
         ctx.fillStyle = fillRect;
         ctx.rect(0,0,cv.width,cv.height);
         ctx.fill();
         ctx.fillStyle = fillText;
         ctx.fillText('x: '+e.pageX,10,10);
         ctx.fillText('y: '+e.pageY,50,10);
        //draw temp canvas to main canvas
        this.width = this.width;
        mainCtx.fillStyle = mainFill;
        mainCtx.rect(0,0,main.width,main.height);
        mainCtx.fill();
        mainCtx.drawImage(cv,parseInt(cv.style.left),parseInt(cv.style.top));
    }
}
var mUp = function(e)
{
    isHolding = false;
    main.removeEventListener('mousemove',mMove);
}
main.addEventListener('mousedown',mDown);
main.addEventListener('mouseup',mUp);

还可以在不使用时摆脱move事件，这将有助于减少内存中的事件调度，并有助于提高性能。

相关文章：