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

GrizzzlyGames · October 19, 2015

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

<!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 помогите с ошибкой

wwt · October 20, 2015

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

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

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

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

Great Rash · October 20, 2015

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

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

wwt · October 20, 2015

+ элементу img нечего делать в head, его место как минимум в body.

nerv · October 20, 2015

+ элементу img нечего делать в head, его место как минимум в body.

это логотип :lol:

GrizzzlyGames · October 20, 2015

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

Great Rash · October 20, 2015

Тогда вам будет проще юзать связку Phaser.io + TypeScript. Практически в родной стихии окажетесь.

wwt · October 20, 2015

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

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

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

GrizzzlyGames · October 20, 2015

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

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

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

Николя223 · October 20, 2015

Это не больно то и простая задача)))
вы решили уже?

Николя223 · October 20, 2015

Я на канве набросал принцип, только наверно ему непонятно будет))) лучше действительно без канвы пусть делает - удобнее

GrizzzlyGames · October 21, 2015

Скажу прямо...по сути мне HTML как язык к обучению не нужен, просто потребовался для продвижения моей игры в Google Play, так сказать я ему движок, он рекламу... возможно это моё единичное пересечение с html...прошу посоветуйте как проще всего реализовать такое простое до ужаса приложение для контакта....есть 2 папки в одной изображение фонов в другой картинки предметов
Запускаем приложение...появляется canvas 640х480 на нем картинка(фон) и кнопка снизу по центру в канвасе(представляют из себя картинки)
если нажать на кнопку то....отрисовывается случайная картинка из папки предметов в определенных координатах, первая кнопка удаляется и появляются две новых там же столбцом, по нажатию на вторую кнопку постоянно меняется картинка на случайную из папки с предметами, третья кнопка ниже рассказать друзьям.... могу нарисовать примерный макет приложения для простоты понимания...помогите пожалуйста, знаю что задача простая для тех кто знает язык...или кто может накидайте пожалуйста код, единственная цель это зацепится на Google play, если зацеплюсь с меня причитается )))))
а зачем тут вообще canvas?

Вот собственно пример http://jsfiddle.net/ec0df76n/
Принцип должен быть ясен.

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

Николя223 · October 21, 2015

для отрисовки графики в целом

он задумывался как заменитель флэша))

Great Rash · October 21, 2015

он задумывался как заменитель флэша))

Неправда.

Николя223 · October 21, 2015

Неправда.

GrizzzlyGames · October 22, 2015

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

Great Rash · October 22, 2015

Не нужно брать рандомно изображение из папки. Достаточно назвать все картинки одинаково - img_1, img_2, img_3 и т.п., а затем скриптом рандомно менять цифру в src.

GrizzzlyGames · October 22, 2015

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

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 October 22, 2015 by GrizzzlyGames

Николя223 · October 22, 2015

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

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

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

GrizzzlyGames · October 22, 2015

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

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

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

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

Николя223 · October 22, 2015

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

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

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

GrizzzlyGames · October 22, 2015

Теперь вылезла вот такая хрень)))

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

Uncaught TypeError: Cannot set property 'src' of null

Николя223 · October 22, 2015

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

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

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

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

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

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

Sign In

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

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information