Question

我正在尝试使用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);}

Answer 1

我有完整的（但是很杂乱的）代码：

<!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>

Answer 2

Jude，用这个代替补充线：

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

按下屏幕时JavaScript绘制一个矩形

2 个答案: