1

context.clip（）;を動的に変更しようとしています。HTML5キャンバスで、配列からさまざまな値で図形を描画します。アイデアは、ボードゲームのさまざまな部分を次々に照らし、ボードの暗いバージョンを切り取って、よりクリアなバージョンの正方形だけを表示することです。

これは私が苦労しているコードであり、このサイトからの他の質問に基づいていますが、実際にはエラーを見つけることができません：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 Trivial</title>

<script type="text/javascript">

var strings = new Array();
strings[0] = "context.moveTo(134,487);context.lineTo(169,435);context.lineTo(200,449);context.lineTo(172,508);";
strings[1] = "context.moveTo(102,461);context.lineTo(142,414);context.lineTo(169,434);context.lineTo(133,485);";
strings[2] = "context.moveTo(71,434);context.lineTo(120,394);context.lineTo(143,414);context.lineTo(99,461);";
strings[3] = "context.moveTo(49,403);context.lineTo(101,370);context.lineTo(121,394);context.lineTo(70,435);";
strings[4] = "context.moveTo(19,340);context.lineTo(78,320);context.lineTo(99,370);context.lineTo(48,404);context.lineTo(31,375);";
strings[5] = "context.moveTo(172,507);context.lineTo(198,449);context.lineTo(231,458);context.lineTo(211,522);";
strings[6] = "context.moveTo(259,531);context.lineTo(267,466);context.lineTo(230,460);context.lineTo(213,521);";
strings[7] = "context.moveTo(257,531);context.lineTo(266,468);context.lineTo(300,470);context.lineTo(334,466);context.lineTo(347,531);context.lineTo(302,534);";

var images = new Array();

function draw(i){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = 'board_dark.jpg';
    img.onload = function() {
        context.drawImage(img,0,0);
    }
    images[i] = new Image();
    images[i].onload = function() {
        eval(strings[Math.floor(Math.random()*6)]);
        context.closePath();
        context.clip();
        context.drawImage(images[i],0,0);
        i = i + 1;
        window.setTimeout(function(){draw(i)},100);
    }
    images[i].src = 'board.jpg';
}

</script>
</head>
<body onLoad="draw(0);">
<canvas id="myCanvas" width="1024" height="1024"></canvas>
</body>
</html>

私はひどくコーディングしていますか？書き方を変えたり、eval（）を使わないようにしたりして、うまくいきませんでした...

いつものように、あなたの助けをありがとう！

ラモン

PD-私の英語でごめんなさい！

4

2 に答える 2

1

あなたのコードは本当に奇妙です。これをコーディングする方法をよりよく理解できるように、いくつかをやり直しました（たとえば、evalを使用せずに！）

http://jsfiddle.net/p6tXv/

これで、指定したポイントのリストから描画する一般的な関数があります（これらは指定したポイントと同じです）。

ほぼ間違いなく、クリップと暗い画像を使用したくないでしょう。代わりに、半透明の黒でボード上に描画する必要があります。

私はそれがスポットを黒くするような方法でコードを書きました。スポット以外のすべてを黒く塗りつぶしたい場合は、もう少し複雑なパットを書く必要がありますが、それほど難しいことではありません。

于 2012-01-31T20:03:28.453 に答える
0

コーディングスタイルについてのコメントです。eval（）を使用してcontext.moveToロジックを呼び出すことは、あらゆる種類の問題です。「evalが悪い理由」については、さまざまな理由でGoogleを確認してください。それは他の場所で何度も言及されています。

コマンドを保存する代わりに、座標をポリゴンスタイルのオブジェクトとして保存し、ポイントを反復処理して、目的の結果を達成します。

これは特定の目的を説明するために作成された単純なデモである可能性があることを理解していますが、コードを共有している場合は、悪いコードを共有していることになります。見直しを検討。

于 2013-01-08T01:55:39.737 に答える