Попытка динамически изменить context.clip ();в холсте HTML5 - PullRequest
Новая
       21

Попытка динамически изменить context.clip ();в холсте HTML5

1 голос
/ 31 января 2012

Я пытаюсь динамически изменить 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- Извините за мой английский!

Ответы [ 2 ]

1 голос
/ 01 февраля 2012

Ваш код действительно очень странный. Я переделал некоторые из них, чтобы дать вам лучшее представление о том, как приступить к кодированию этого (без использования eval, для одного!)

http://jsfiddle.net/p6tXv/

Теперь есть общая функция, которая будет опираться на список точек, которые вы ей дали (это те же точки, которые вы указали).

Вы почти наверняка не хотите использовать клип и темное изображение, вместо этого вы должны рисовать поверх доски полупрозрачным черным.

Я написал код таким образом, чтобы он закрашивал пятна. Если вы хотите затемнить все, кроме пятен, то вам придется написать пэт, который немного сложнее, но не должен быть таким сложным.

0 голосов
/ 08 января 2013

Просто комментарий к стилю кодирования; использование eval () для вызова вашей логики context.moveTo - это все виды ошибок. Проверьте Google по разным причинам на "почему eval плох"; это упоминалось в других местах много раз.

Вместо сохранения команд сохраняйте координаты как объекты в стиле многоугольника и выполняйте итерации по точкам для достижения желаемого результата.

Я понимаю, что это может быть простая демонстрация, написанная для иллюстрации конкретной цели, но если вы вообще делитесь кодом, то вы будете делиться плохим кодом. Подумайте о пересмотре.

...