尝试动态更改 context.clip();在 HTML5 画布中答案

【问题标题】：Trying to change dynamically a context.clip(); in a HTML5 canvas尝试动态更改 context.clip();在 HTML5 画布中
【发布时间】：2012-02-23 12:42:17
【问题描述】：

我正在尝试动态更改 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-对不起我的英语！

【问题讨论】：

标签： javascript html loops canvas drawimage

【解决方案1】：

你的代码真的很奇怪。我重做了一些，让您更好地了解如何进行编码（不使用 eval ！）

http://jsfiddle.net/p6tXv/

现在有一个通用函数可以从您提供的点列表中提取（它们与您提供的点相同）。

您几乎肯定不想使用剪辑和深色图像，而是应该使用半透明黑色在板上绘制。

我编写代码的方式是它会遮住斑点。如果你想把除了斑点以外的所有东西都涂黑，那么你将不得不写一个稍微复杂一点的拍子，但应该没那么难。

【讨论】：

非常感谢！是的，我需要把除了斑点以外的所有东西都涂黑，因为我的想法是让斑点交替发光，但我会按照你的代码尝试。再次感谢您！

【解决方案2】：

只是对编码风格的评论；使用 eval() 来调用你的 context.moveTo 逻辑是各种不好的。检查谷歌的各种原因“为什么 eval 不好”；它在其他地方被多次提及。

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

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

【讨论】：