在画布中拖动时图像闪烁答案

【问题标题】：Image flickers during drag in canvas在画布中拖动时图像闪烁
【发布时间】：2012-07-16 14:38:03
【问题描述】：

我正在画布中拖动图像。但是在拖动图像的过程中会闪烁。我认为函数调用存在一些问题。我已经使用 onmousedown、onmouseup 和 onmousemove 事件实现了功能。我在拖动过程中将图像绘制到画布上。

这是我的代码，

<html>
    <head>
    </head>
    <body>
    <div>
    <canvas id="canvas5" height="500" width="500" style = "position:relative;left:500px; border:2px  solid black;"> This text is displayed if your browser does not support HTML5 Canvas. </canvas>
    </div>
    <script type="text/javascript">
    var x2 = 100;
    var y2 = 100;
    var ctx; 
    var can;  
    var img=new Image();
    function drawcan() {
    can = document.getElementById("canvas5");
    ctx = can.getContext('2d');
    ctx.clearRect(0, 0, 500, 500);
    img.onload = function(){
    ctx.drawImage(img,x2 - img.width/2,y2 - img.height/2, img.width,img.height);
    };
    img.src="images/213.jpg";
    };

    function myMove(e){
    x1 = e.pageX - x2 - can.offsetLeft;
    x2 = x2 + x1;
    y1 = e.pageY - y2 - can.offsetTop;
    y2 = y2 + y1;
    drawcan();
    };

    function myDown(e) {
    if (e.pageX < x2 + img.width/2 + canvas5.offsetLeft)
    if (e.pageX > x2 - img.width/2 + canvas5.offsetLeft)
    if (e.pageY < y2 + img.height/2 + canvas5.offsetTop)
    if (e.pageY > y2 - img.height/2 + canvas5.offsetTop){ 
    can.onmousemove = myMove;
    };
    };  

    function myUp(e){
    can.onmousemove = null;   
    };

    drawcan();
    can.onmousedown = myDown;
    can.onmouseup = myUp;
    </script>
    </body>
    </html>

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

function drawcan() {
    can = document.getElementById("canvas5");
    ctx = can.getContext('2d');
    ctx.clearRect(0, 0, 500, 500);
    img.onload = function(){
        ctx.drawImage(img,x2 - img.width/2,y2 - img.height/2, img.width,img.height);
    };
    img.src="images/213.jpg";
};

看看这是做什么的？每次您调用drawcan 时，它都会在稍后绘制之前加载图像。当然，图像是缓存的，但这个过程需要时间。相反，在做任何事情之前等待图像加载，然后永远不要再次加载它。

var img = new Image(),
    load = false,
    can = document.getElementById("canvas5"),
    ctx = can.getContext('2d');
img.onload = function() {
    load = true;
    drawcan(); // init
};
img.src="images/213.jpg";

function drawcan() {
    if (!load) return;
    ctx.clearRect(0, 0, 500, 500);
    ctx.drawImage(img, x2 - img.width/2,y2 - img.height/2, img.width,img.height);
};

【讨论】：

所以你的意思是这种解决方案会发生闪烁！！！代码很好！！