Вопрос по javascript, canvas, html, html5-canvas, html5 – сделать активную область на холсте, чтобы изменить изображение

3

Пожалуйста, помогите мне:

create clickable regions in the canvas below that I can assign onmousedown= events to. I know how to do this with invisible DIVs, but I think there is a more elegant way to do it in canvas that I don't know.

when I click one of the regions, want to pass an image name to a function so that it changes the image being displayed to another image, and then changes it back onmouseup.

если вы покажете мне только один регион и один пример mousedown / mouseup, я могу сделать все остальное ... спасибо.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

        <canvas id="myCanvas" width="506" height="319" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
        </canvas>

        <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        var img=new Image();
        img.onload = function(){
        ctx.drawImage(img,0,0);
        };
        img.src="firstImage.gif";
        </script>

        /////////HERE NEED/////////
                    CREATE CLICKABLE REGION <region>
                    <region>
                    onmousedown=changeCanvasImage(secondImage.gif) //change image on click
                    onmouseup=changeCanvasImage(firstImage.gif)  /change it back when done
        </region>
</body>
</html>

Ваш Ответ

1   ответ
5

Элемент canvas может вызывать события, а графические элементы внутри canvas - нет. Чтобы сделать это, вам нужно либо реализовать это самостоятельно, обнаруживположение мыши на холсте когда он щелкает и связывает значение с чем-то на вашем холсте, или используя один из множествабиблиотеки холста доступны, которые будут обрабатывать обнаружение для вас.

Похожие вопросы