Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Немного о HTML5
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Немного о HTML5

Страниц (1): [1]
 

1. Toxa - 16 Апреля, 2011 - 11:13:30 - перейти к сообщению
Здравствуйте, уважаемые веб разработчики. Хочу затронуть тему HTML5 Canvas в этом топике. Всем известны примеры работы с canvas, вот, скажем, нарисуем простой круг
CODE (javascript):
скопировать код в буфер обмена
  1. example = document.getElementById("example");
  2. ctx = example.getContext('2d');
  3. //ctx.fillRect(25,25,100,100);
  4.  
  5. ctx.beginPath();
  6. ctx.arc(75,75,50,0,Math.PI*2,true); // circle
  7. ctx.stroke();

вопрос в том, как добавить сюда событие onclick? Можно ли как-то работать с кругом, как с элементом DOM? В идеале очень хотелось бы написать что-то типа

CODE (javascript):
скопировать код в буфер обмена
  1. var circle = ctx.arc(75,75,50,0,Math.PI*2,true); // circle
  2. circle.onclick = function(){}

Делают же игры как-то на HTML5
(Добавление)
мне нужно чтобы при клике внутри круга его радиус, скажем, увеличивался на 5%. А при щелчке вне круга - уменьшался
2. JustUserR - 16 Апреля, 2011 - 19:02:26 - перейти к сообщению
Toxa пишет:
Вопрос в том, как добавить сюда событие onclick?

Источник: http://diveintohtml5[dot]org/canvas[dot]html#divingin
Diveintohtml5 пишет:
The next step is to take the MouseEvent object and calculate which square on the Halma board just got clicked. The Halma board takes up the entire canvas, so every click is somewhere on the board. We just need to figure out where. This is tricky, because mouse events are implemented differently in just about every browser.
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}

At this point, we have x and y coordinates that are relative to the document (that is, the entire HTML page). That’s not quite useful yet. We want coordinates relative to the canvas.

x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;

Now we have x and y coordinates that are relative to the canvas. That is, if x is 0 and y is 0 at this point, we know that the user just clicked the top-left pixel of the canvas.


Источник: http://redsquirrel[dot]com/dave/work[dot][dot][dot]teractivecanvas/
CODE (javascript):
скопировать код в буфер обмена
  1. function getRelativePosition(e) {
  2.         var t = $("zoo");
  3.         var x = e.clientX+(window.pageXOffset||0);
  4.         var y = e.clientY+(window.pageYOffset||0);
  5.         do
  6.                 x-=t.offsetLeft+parseInt(t.style.borderLeftWidth||0),
  7.                 y-=t.offsetTop+parseInt(t.style.borderTopWidth||0);
  8.         while (t=t.offsetParent);
  9.         return {x:x,y:y};
  10. }
  11.  
3. Ch_chov - 16 Апреля, 2011 - 20:49:24 - перейти к сообщению
Никак не добавить, потому что, то что вы рисуете внутри canvas не относится к DOM.
Типовое решение, назначить событие canvas тегу (в вашем случае example), а потом уже в функции обработчике вычислять координаты клика и определять попал он вкруг или еще куда нибудь.

Примерно это же JustUser вам и привел.
Вот еще пример: http://dev[dot]opera[dot]com/articles/vi[dot][dot][dot]canvas-painting/

 

Powered by ExBB FM 1.0 RC1