0

我是新来的，所以请原谅我的无知。希望每个人都有一个美好的星期五晚上。我正在一个网站上工作，那里会有一个画布，在那个画布上会有一个栏，我的目标是让栏在我按“D”时向右延伸，当我按“A”时向左缩回。我正在使用函数 fillRect 并且延伸的右侧部分工作得很好，而缩回部分根本不工作，因为我正在尝试使用 clearRect 函数。clearRect 函数正在清除我的矩形的整个原始宽度，以及我的画布的浅蓝色，留下一条灰色苦涩的条纹。这是我的代码，如果你们有任何想法，当我按下“A”时，我如何能够清除灰色条的最后 10 个像素，同时保持美丽的蓝色底层画布完好无损

 $(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;
 }
}    


});
4

3 回答 3

0

您必须在每行更改时重新绘制背景（这是画布方式）

别担心，画布重绘速度非常快！

这是代码和小提琴：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>
于 2013-07-06T04:07:04.837 回答
0

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

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;

});

也许它看起来很重，但事实并非如此，相信我。

于 2013-07-06T03:58:41.180 回答
0

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/

于 2013-07-06T04:06:00.090 回答