Question

我是新来的，请原谅我的无知。希望每个人都有一个愉快的星期五晚上。我正在一个有画布的网站上工作，在那个画布上会有一个酒吧，我的目标是当我按下'D'时向左伸展，当按'A'时向左缩回。我正在使用函数fillRect，并且当缩进部分根本不工作时，扩展右部分工作正常，因为我试图使用clearRect函数。 clearRect函数正在清除矩形的整个原始宽度，而不是我的画布的浅蓝色，留下一条灰色的苦味条纹。这是我的代码，如果你们中的任何人知道我怎么能设法清除我的灰色条的最后10个像素，同时当我按下“A”时保持美丽的蓝色底层画布完好无损我将永远感激。

 $(document).ready(function(){
    var width=10;
$(document).keydown(function(key){
    if(key.which === 68)    
        adjustWidth(1);
    else if(key.which === 65)
        adjustWidth(2);

});
var canvas=$("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("canvas").height();

ctx.fillStyle = "#C1DAD6";
ctx.fillRect(0,0,w,h);  
ctx.strokeStyle="black";
ctx.strokeRect(0,0,w,h);

function adjustWidth(iw)
{   ctx.fillStyle = "grey";
if(iw===1){
    ctx.fillRect(0,100,width+10,5)
    width+=10;
    }
 else if(iw===2){
     ctx.clearRect(0,100,width,5)
   width-=10;
 }
}    


});

Answer 1

我建议你使用另一种方法：

var width = 10;

function draw() {
    ctx.clearRect(0,0,w,h);
    ctx.drawRect(0,100,width,5);
}

setInterval(draw, 30);

$(document).keydown(function(key){
    if(key.which === 68)    
        width += 10;
    else if(key.which === 65)
        width -= 10;

});

也许它看起来很重但不是，相信我。

Answer 2

clearRect也清除了背景。

首先保存背景：

 $(document).ready(function(){
    var width=10;

    $(document).keydown(function(key){
        if(key.which === 68)    
            adjustWidth(1);
        else if(key.which === 65)
            adjustWidth(2);
    });

    var canvas=$("#canvas")[0];
    var ctx = canvas.getContext("2d");
    var w = $("#canvas").width();
    var h = $("canvas").height();

    ctx.fillStyle = "#C1DAD6";
    ctx.fillRect(0,0,w,h);  
    ctx.strokeStyle="black";
    ctx.strokeRect(0,0,w,h);
    var saved=ctx.getImageData(0,0,w,h);

    function adjustWidth(iw){
        ctx.putImageData(saved,0,0);
        ctx.fillStyle = "grey";
        if(iw===1){
            width+=10;
        }else if(iw===2){
            width-=10;
        }
        ctx.fillRect(0,100,width,5);
    }
});

这是一个jsfiddle链接：http://jsfiddle.net/bgg96/

Answer 3

您必须使用行中的每个更改（即画布方式）重绘背景

别担心，画布在重绘时非常快！

这是代码和小提琴：http://jsfiddle.net/m1erickson/WdEWz/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var width=10;

    $(document).keydown(function(key){
        if(key.which === 68)    
            adjustWidth(1);
        else if(key.which === 65)
            adjustWidth(2);
    });

    var canvas=$("#canvas")[0];
    var ctx = canvas.getContext("2d");
    var w = $("#canvas").width();
    var h = $("canvas").height();

    ctx.fillStyle = "#C1DAD6";
    ctx.fillRect(0,0,w,h);  
    ctx.strokeStyle="black";
    ctx.strokeRect(0,0,w,h);

    function adjustWidth(iw){

        ctx.clearRect(0,0,w,h);
        ctx.fillStyle = "#C1DAD6";
        ctx.fillRect(0,0,w,h);  
        ctx.fillStyle = "grey";
        if(iw===1){
             width+=10;
             ctx.fillRect(0,100,width+10,5)
        }else if(iw===2){
             width-=10;
             if(width>0){
                  ctx.fillRect(0,100,width+10,5)
             }
        }
    } 

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Javascript画布问题

3 个答案: