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