Jump to content
  • 0

Ошибка клика в canvas


GrizzzlyGames
 Share

Question

Здравствуйте у меня почему то вылазит ошибка, вот код

<!doctype html> <html><head><title>Gudim</title><script></script><img id="button1" src="file:///E:/www/button/button1.png" style="display:none;" onClick="draw2img()"/></head><body>    <canvas id="canvas" width="640" height="480" onClick="canvas.onmousemove()">      <button type="button" value="242"></button>    </canvas>    <script type="text/javascript">        canvas=document.getElementById("canvas");        ctx = canvas.getContext('2d');      var picfon = new Image();      picfon.src = 'file:///E:/www/background/background.png';  // Источник изображения      var button2 = new Image();      var button3 = new Image();      button2.src = 'file:///E:/www/button/button2.png';//Кнопка ЕЩЕ!      button3.src = 'file:///E:/www/button/button3.png';//Кнопка Рассказать другу.    picfon.onload = function() {      ctx.drawImage(picfon, 0, 0);      var button1img = document.getElementById("button1");      ctx.drawImage(button1img, 190, 380, 260, 60);    }    canvas.onmousemove = function (e) {    var x = e.pageX = this.offsetLeft;    var y = e.pageY = this.offsetTop;    onClick = function draw(){      if(x>190){        ctx.drawImage(button2, 100, 100);      }    }    }    </script></body></html>

жалуется на Uncaught TypeError: Cannot set property 'pageX' of undefined помогите с ошибкой

 

Link to comment
Share on other sites

22 answers to this question

Recommended Posts

  • 0

1) onClick="canvas.onmousemove()" - это какая-то адская конструкция.
2) если уж использовать такое извращение, то объект события нужно туда передать - onClick="canvas.onmousemove(event)"
3) в HTML все имена атрибутов пишутся с маленькой буквы - onclick вместо onClick
4) конструкция onClick = function draw()... в данном коде не будет делать ничего (кроме того, что создаст глобальную переменную с именем onClick)
5) непонятно зачем вы пытаетесь вызвать событие onmousemove на клик.

Вывод: вы вообще не понимаете что у вас в коде происходит.

Link to comment
Share on other sites

  • 0
Спасибо за советы, но я в HTML 0, всего второй день изучаю, я с c# работаю(делаю игры, приложения для андроид)

ну вот как вы отслеживаете клики на элементах в сишарпе?

 

Есть координаты, можно узнать положение элемента и его размеры, отлавливаем куда кликнула мышка, ищем координаты какому объекту они принадлежат ну и тд )))

Link to comment
Share on other sites

  • 0

Скажу прямо...по сути мне HTML как язык к обучению не нужен, просто потребовался для продвижения моей игры в Google Play, так сказать я ему движок, он рекламу... возможно это моё единичное пересечение с html...прошу посоветуйте как проще всего реализовать такое простое до ужаса приложение для контакта....есть 2 папки в одной изображение фонов в другой картинки предметов

Запускаем приложение...появляется canvas 640х480 на нем картинка(фон) и кнопка снизу по центру в канвасе(представляют из себя картинки)

если нажать на кнопку то....отрисовывается случайная картинка из папки предметов в определенных координатах, первая кнопка удаляется и появляются две новых там же столбцом, по нажатию на вторую кнопку постоянно меняется картинка на случайную из папки с предметами, третья кнопка ниже рассказать друзьям.... могу нарисовать примерный макет приложения для простоты понимания...помогите пожалуйста, знаю что задача простая для тех кто знает язык...или кто может накидайте пожалуйста код, единственная цель это зацепится на Google play, если зацеплюсь с меня причитается )))))

Link to comment
Share on other sites

  • 0

Скажу прямо...по сути мне HTML как язык к обучению не нужен, просто потребовался для продвижения моей игры в Google Play, так сказать я ему движок, он рекламу... возможно это моё единичное пересечение с html...прошу посоветуйте как проще всего реализовать такое простое до ужаса приложение для контакта....есть 2 папки в одной изображение фонов в другой картинки предметов

Запускаем приложение...появляется canvas 640х480 на нем картинка(фон) и кнопка снизу по центру в канвасе(представляют из себя картинки)

если нажать на кнопку то....отрисовывается случайная картинка из папки предметов в определенных координатах, первая кнопка удаляется и появляются две новых там же столбцом, по нажатию на вторую кнопку постоянно меняется картинка на случайную из папки с предметами, третья кнопка ниже рассказать друзьям.... могу нарисовать примерный макет приложения для простоты понимания...помогите пожалуйста, знаю что задача простая для тех кто знает язык...или кто может накидайте пожалуйста код, единственная цель это зацепится на Google play, если зацеплюсь с меня причитается )))))

а зачем тут вообще canvas?

 

Вот собственно пример http://jsfiddle.net/ec0df76n/

Принцип должен быть ясен.

Link to comment
Share on other sites

  • 0

 

Скажу прямо...по сути мне HTML как язык к обучению не нужен, просто потребовался для продвижения моей игры в Google Play, так сказать я ему движок, он рекламу... возможно это моё единичное пересечение с html...прошу посоветуйте как проще всего реализовать такое простое до ужаса приложение для контакта....есть 2 папки в одной изображение фонов в другой картинки предметов

Запускаем приложение...появляется canvas 640х480 на нем картинка(фон) и кнопка снизу по центру в канвасе(представляют из себя картинки)

если нажать на кнопку то....отрисовывается случайная картинка из папки предметов в определенных координатах, первая кнопка удаляется и появляются две новых там же столбцом, по нажатию на вторую кнопку постоянно меняется картинка на случайную из папки с предметами, третья кнопка ниже рассказать друзьям.... могу нарисовать примерный макет приложения для простоты понимания...помогите пожалуйста, знаю что задача простая для тех кто знает язык...или кто может накидайте пожалуйста код, единственная цель это зацепится на Google play, если зацеплюсь с меня причитается )))))

а зачем тут вообще canvas?

 

Вот собственно пример http://jsfiddle.net/ec0df76n/

Принцип должен быть ясен.

 

Огромедное тебе спасибо товарищ, просто я думал что такое можно воплотить только в canvas так как он для отрисовки графики в целом

Link to comment
Share on other sites

  • 0

И теперь такой вопрос....По нажатию на кнопку еще, должна выводиться случайная картинка, знаю что можно через массив это сделать, на если в папке почти 1000 картинок? писать каждой путь очень долго, можно ли как нибудь сделать что бы он рандомно брал изображение из папки?

Link to comment
Share on other sites

  • 0

Вот написал тестем, выдает ошибку

function rand(){	var a=Math.round(Math.random()*4)	imgobj = new Image;	link = "file:///E:/www/image/image_"+ a +".png"	imgobj.src = link;	drawImage(imgobj, 100, 100);}

Вот ошибка

Uncaught ReferenceError: drawImage is not defined

Edited by GrizzzlyGames
Link to comment
Share on other sites

  • 0

ф-я drawImage не существет

 

Вы же не на каве собрались делать?

 

вам нужно атрибут src поменять

Он картинку правильно находит но отрисовывать не хочет...как можно её вывести...

Link to comment
Share on other sites

  • 0

Вы полностью не понимаете что вы делаете)))

var img = document.getElementById("myImg");  // находим фото, можно например по ID 
img.src = 'xxxxxx.gif'; // меняем src

 

почитайте https://learn.javascript.ru/searching-elements-dom

Link to comment
Share on other sites

  • 0

Просто вы не представляете как DOM устроен.  Вы работали с xml?

У каждого элемента могут быть свои имена, особенности и прочее, по которым можно обратится к элементу - в этом плане это селекторы)

 

у элемента может быть ID - его уникальный номер, могут быть классы и т д, по которым к ним также можно обращатся

Вам нужно у данной фотографии проставить атрибут id="название"   и уже потом вы сможете обращатся к элементу по id 

var img = document.getElementById("myImg");

в данном примере происходит обращение к фотографии, у которой id ="myImg"

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy