这段代码允许我以（x，y）坐标逐个绘制十字形，间隔为5秒，它可以正常工作：
cross我想要做的是更改将在mapSprite下显示的图片cross.png的颜色，让我们说它以红色cross-blue.png显示，并在显示第二个之后，最老的将同时变为蓝色 <script src="http://alertifyjs.com/build/alertify.js"></script>
<link rel="stylesheet" href="http://alertifyjs.com/build/css/alertify.css" />
<link rel="stylesheet" href="http://alertifyjs.com/build/css/themes/default.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div style="width : 75%;margin : auto;">
<canvas id="Canvas" width="954" height="267"></canvas>
<button class="play">Play</button>
<button class="pause">Pause</button>
</div>
<script>
var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");
// Map sprite
var mapSprite = new Image();
mapSprite.src = "v1.png";
var array_x = [351,315,353,352,318,485,351,748,568,645,373,350,572,374,650,240,240,320,707,235,402,539,256,410,433,405,353,745,404,320,514,322,692,474,293,418,418,690,237,513,378,478,433,405,285,429,458,622,568,536,564,389,641,534,567,454,575,482,459,539,431,327,464,374,348,520,279,378,509,516,232,744,351,710,481,540,429,642,537,459,513,689,324,463,375,747,431,265,484,591,458,460,485,407,720,483,376,520,691,376,232,413,536,430,653,714,484,715,629,573,263,408,436,300,544,407,432,568,536,462,485,346,610,524];
var array_y = [18,18,181,228,60,232,34,32,26,37,65,62,228,180,91,83,83,81,88,62,35,65,52,155,23,90,94,95,230,232,15,105,37,68,47,186,186,93,14,65,22,10,230,68,18,91,226,22,150,227,89,43,76,92,62,12,187,96,78,33,35,180,151,230,151,154,95,96,31,233,39,77,79,20,30,165,65,51,18,62,96,19,150,33,79,19,35,23,210,20,180,95,184,19,76,64,36,186,73,151,26,192,153,156,24,36,165,97,85,78,77,101,184,22,177,212,210,166,79,210,150,168,45,18];
var isPaused = false;
var firstLoad = function () {
context.font = "15px Georgia";
context.textAlign = "center";
}
firstLoad();
var main = function () {
draw();
};
var draw = function () {
// Clear Canvas
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw map
context.drawImage(mapSprite, 0, 0, 954, 267);
//draw red cross
cross = new Image();
cross.src = "cross.png";
// draw blue cross
cross1 = new Image();
cross1.src = "cross-blue.png";
var t = window.setInterval(function() { if(!isPaused) { event_coor(); } }, 5000);
i=0;
function event_coor() {
if (i < array_x.length) {
context.drawImage(cross, array_x[i], array_y[i], 10, 10);
window.setInterval (function () { context.drawImage(cross1, array_x[i], array_y[i], 10, 10);}, 2000);
i=i+1;
}
}
}
mapSprite.addEventListener('load', main);
//with jquery
$('.pause').on('click', function(e) {
e.preventDefault();
isPaused = true;
});
$('.play').on('click', function(e) {
e.preventDefault();
isPaused = false;
});
</script>
。因为我总是把最后一个用红色引起注意。
如何在几秒钟后更改最后一个图像源context.drawimage？
非常感谢。
编辑1：在2秒后重绘在最后一个
之上{{1}}
答案 0 :(得分：0)
你必须重绘整个场景，或者如果十字架没有被其他元素重叠/有纯色，只有十字架。
无法更改已渲染元素的src，因为之前在画布上绘制的内容没有历史记录（场景图）。