Действие по клику на элемент Canvas

alexissmile · February 18, 2016

Задача: нарисовать домик, и присвоить различным его элементам действия по клику, например: По клику на надпись открыть модальное окно, по клику на дверь сделать её открытой и ид. Домик нарисовал, а как применить действие по клику на элемент не могу никак понять. Не прошу сделать за меня задание, хочу именно узнать, как реализовать здесь oneclick или что здесь правильнее использовать.

<!doctype html><html>    <head>        <title>Домик</title>        <meta charset='Windows-1251'>    </head>    <body>        <canvas id='example'>Обновите браузер</canvas>        <script>            var example = document.getElementById("example"),			    ctx     = example.getContext('2d');            example.width  = 1280;            example.height = 720;                        <!-- Дом -->            ctx.fillStyle = '#F0E68C';            ctx.fillRect(500, 350, 400, 350);            	    <!-- Дверь -->	    ctx.fillStyle = '#79443B';            ctx.fillRect(775, 495, 90, 200);	    ctx.fillStyle = '#3D2B1F';	    ctx.fillRect(845, 595, 8, 8);            	    <!-- Крыша -->            ctx.beginPath();	    ctx.fill();	    ctx.moveTo(500, 350);	    ctx.lineTo(700, 100);	    ctx.lineTo(900, 350);	    ctx.closePath();	    ctx.fillStyle = '#CC4E5C';	    ctx.fill();	    <!-- Окно -->	    ctx.fillStyle = '#30D5C8';            ctx.fillRect(550, 400, 120, 120);	    <!-- Труба -->	    ctx.beginPath();	    ctx.fill();	    ctx.moveTo(820, 250);	    ctx.lineTo(820, 200);	    ctx.lineTo(865, 200);	    ctx.lineTo(865, 306);	    ctx.closePath();	    ctx.fillStyle = '#C41E3A';	    ctx.fill();                   <!-- Надпись -->	    ctx.fillStyle = 'black';	    ctx.font = 'italic 22.5pt Times New Roman';	    ctx.fillText("Винни-Пух", 750, 480);                </script>    </body></html>

wwt · February 19, 2016

Отлавливать событие клика по холсту, сверять координаты точки, вычислять какому объекту она принадлежит, выполнять нужное действие. В интернете есть информация по этому поводу.

Николя223 · February 19, 2016

Погуглите библиотечки) Сейчас много хороших для использования канваса))

Sign In

Действие по клику на элемент Canvas

Question

alexissmile

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

Николя223

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information