0

私はここで新しいので、私の無知を許してください。みんなが素晴らしい金曜日の夜を過ごしていることを願っています。キャンバスがあり、そのキャンバスにバーがある Web サイトで作業しています。私の目標は、「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

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 に答える
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

行を変更するたびに背景を再描画する必要があります（これがキャンバスの方法です）

キャンバスの再描画は非常に高速です。

ここにコードとフィドルがあります: 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 に答える