嗨，我是Javascript的新手，我尝试在画布上画画。它在我的笔记本电脑中响应（我的意思是ipads和手机），它不起作用：我只能通过点击绘制点。我添加了一些touchevents，但我不明白我没有工作。
//1 select the canvas
let canvas = document.getElementById('canvas');
//2 get the context of the canvas
let context = canvas.getContext('2d');
//3 fix the width & height of the canvas according to the window
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//create a variable for the radius or size of the brush by default
let radius = 10;
//2.1 create a var dragging false then use true when you use
let dragging = false;
//2.11 create a variable to put the lineTo same size as the brush
context.lineWidth = radius * 2;
//5 function of the mouseDown
function putPoint(e) {
//2.3 check if dragging works
if (dragging) {
//2.9 add a context.lineTo
context.lineTo(e.clientX, e.clientY);
//2.10 executiion of the point
context.stroke();
context.beginPath();
// 6 context.arc(X,Y,radius,start,end); the x and coordinate of the event
//context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI * 2); ->if it's with a mousedown, it doesn't work
context.arc(e.clientX, e.clientY, radius, 0, Math.PI * 2);
//clientX and clientY is more stable than offsetX offsetY(it is ess standardized between each navigator)
// 7 fill that
context.fill();
//2.7 create a beginPath
context.beginPath();
//2.8 move according to the position of the mouse
context.moveTo(e.clientX, e.clientY);
}
}
//2.4create a function engage
function engage(e) {
dragging = true;
//2.6 don't know if it is mandatory add the function putPoint(e)
putPoint(e);
}
//2.5create a function disengage
function disengage(e) {
dragging = false;
//2.12 to avoid the connection between the engage and disengage line
context.beginPath();
}
//4 add an eventlistener to the canvas a mousedown then to the second part change it canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mousemove', putPoint);
//2.2 create addEventListener mouse down and mouseup
canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mouseup', disengage);
/**************touchevents****************************/
canvas.addEventListener('touchmove', putPoint);
//2.2 create addEventListener mouse down and mouseup
canvas.addEventListener('touchstart', engage);
canvas.addEventListener('touchend', disengage);* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
margin: 0;
}
#canvas {
display: block;
}
#toolbar {
width: 100%;
height: 50px;
padding: 10px;
position: fixed;
top: 0;
background-color: #2f2f2f;
color: white;
}
.radcontrol {
width: 30px;
height: 30px;
background-color: #4f4f4f;
display: inline-block;
text-align: center;
padding: 5px;
}
#rad {
float: left;
}
#colors {
float: right;
}
.swatch {
width: 30px;
height: 30px;
border-radius: 15px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.5);
display: inline-block;
margin-left: 10px;
background-color: aqua;
}
.swatch.active {
border: 2px solid white;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="master.css">
</head>
<body>
<div id="toolbar">
<!-----the size of the size brush------------>
<div id="rad">
Radius <span id="radval">10</span>
<div id="decrad" class="radcontrol"></div>
<div id="incrad" class="radcontrol"></div>
</div>
<!-------the palette color---------------------->
<div id="colors">
<div class="swatch active" style="background-color:red"></div>
<div class="swatch" style="background-color:blue"></div>
<div class="swatch" style="background-color:green"></div>
</div>
</div>
<canvas id="canvas" width="300" height="300">
sorry, my darling;)
</canvas>
<script src="apps.js" charset="utf-8"></script>
<script src="radius.js" charset="utf-8"></script>
<script src="colors.js" charset="utf-8"></script>
</body>
</html>