Question

我正在尝试根据点击偶数或奇数计算更改画布上的图像。基本上我想制作一个零和交叉游戏，其中画布上的图像根据鼠标点击次数变为十字或零。如何跟踪画布上的点击次数？请帮忙。请指导我，因为我是html的初学者。

<!DOCTYPE html>
<head>
<title> samp1 </title>
</head>
<body>
<canvas id="mycanvas" width="200" height="100" style="border:1px solid   #000000;">
</canvas>
<style>
#mycanvas {
margin-top:10px;
margin-left:10px;
}
</style>
<img src="http://images.all-free- download.com/images/graphicthumb/roses_554954.jpg" id="my" width="200"  height="100"/>
<img src="http://images.all-free-download.com/images/graphicthumb/flower_lighting_554944.jpg" id="ny" width="200" height="100"/>
<script>
var i=0;
function fn(){
if(i%2==0)
ctx.drawImage(im,0,0,can.width,can.height);
else
ctx.drawImage(in,0,0,can.width,can.height);
i++;}
var can = document.getElementById("mycanvas");
       var ctx = can.getContext("2d");
var im=document.getElementById("my");
var in=document.getElementById("ny");
can.addEventListener("click", fn, false);
</script>
</body>
</html>

Answer 1

我看到两个非常小的错误：

'in'是javascript中的保留字。
“my”img元素

如果纠正了这些问题，您的代码应该按照您想要的方式运行。

这是一个小提琴演示： http://jsfiddle.net/w09tyftt/1/

<style>
    #mycanvas {
        margin-top:10px;
        margin-left:10px;
    }
</style>
<canvas id="mycanvas" width="200" height="100" style="border:1px solid   #000000;">
<img src="http://images.all-free-download.com/images/graphicthumb/roses_554954.jpg" id="my" width="200" height="100" />
<img src="http://images.all-free-download.com/images/graphicthumb/flower_lighting_554944.jpg" id="ny" width="200" height="100" />
<script>
    var i = 0;

    function fn() {
        if (i % 2 == 0) ctx.drawImage(im, 0, 0, can.width, can.height);
        else ctx.drawImage(vin, 0, 0, can.width, can.height);
        i++;
    }
    var can = document.getElementById("mycanvas");
    var ctx = can.getContext("2d");
    var im = document.getElementById("my");
    var vin = document.getElementById("ny");
    can.addEventListener("click", fn, false);
</script>

如何在点击时更改画布图像？

1 个答案: