JavaScript Нарисуйте прямоугольник при нажатии экрана

-2

Я пытаюсь создать простое приложение, используя JavaScript, который рисует прямоугольник, когда я нажимаю экран (на сенсорном экране). Я не знаю, почему он не работает. Вот код:JavaScript Нарисуйте прямоугольник при нажатии экрана

HTML

<canvas id="drawingboard" width="500" height="500" style="border:10px solid #000000;"> 
    You have a horrible browser that will not support an HTML canvas, so this won't work. 
</canvas>

JavaScript

var c = document.getElementById("drawingboard"); 
var ctx = c.getContext("2d"); 
var mouseDown = 0; 
document.body.ontouchstart = function() { 
    mouseDown+=1; 
} 
document.body.ontouchend = function() { 
    mouseDown-=1; 
} 
if (mouseDown == 1) { 

ctx.fillStyle = "#FF0000"; 
ctx.fillRect(0,0,150,75);}

источник

2016-02-26 Jude

необходимо нарисовать в обработчиках событий. –

Jude, замените заполните следующую строку:

ctx.fillRect(event.clientX-50,event.clientY-50,100,100);

источник

2016-02-26 22:15:25

У меня есть полный (но грязный) код:

<!DOCTYPE html> 
<html> 
<head> 
<title>Pixel Drawing</title> 
</head> 
<body> 
<canvas onclick=draw(event) 
id="drawingboard" width="850" height="390" 
style="border:10px    
          solid plum;"> 

You have a horrible browser that will not support an HTML 
canvas, so this won't work.</canvas> 
<script> 
var c = document.getElementById("drawingboard"); 
var ctx = c.getContext("2d"); 
var mouseDown = 0; 
document.body.ontouchstart = function() { 
mouseDown+=1; 
} 
document.body.ontouchend = function() { 
mouseDown-=1; 
} 
function draw(event){ 

ctx.color='gold'; 
ctx.fillStyle = "lime"; 
ctx.fillRect(event.clientX,event.clientY,100,100);} 
</script> 
</body> 
</html>

источник

2016-02-26 02:55:33

Спасибо ... Что делает ctx.color = "gold"; делать? Я знаю, что стиль заполнения заполняет прямоугольник, но золотой цвет, похоже, ничего не делает. – Jude

Также ... Когда я нажимаю экран, он рисует прямоугольник справа от того места, где я постучал. – Jude

JavaScript Нарисуйте прямоугольник при нажатии экрана

ответ

Смежные вопросы