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 不好”；它在其他地方被多次提及。

不是存储命令，而是将坐标存储为多边形样式的对象，并遍历这些点以获得所需的结果。

我意识到这可能是一个为说明特定目的而编写的简单演示，但是如果您完全共享代码，那么您将共享错误的代码。考虑修改。

于 2013-01-08T01:55:39.737 回答