Comment: When making a drawing board, we naturally use html5's canvas to achieve it. In canvas we can draw circles, rectangles, custom lines, etc. This time we mainly use circles and lines to achieve it. Support response to touch events in html
The first thing to note is that we are not drawing with the mouse, but using our fingers on the touch device, such as the iPad.
To make a drawing board, we naturally use html5's canvas to achieve it. In canvas we can draw circles, rectangles, custom lines, etc. This time we mainly use circles and lines to achieve it. Response to touch events is supported in html.
onTouchStart Touch Start
onTouchMove Touch Swipe
onTouchEnd Touch End
With these events, it is very easy for us to draw in the browser with our fingers.
Effects on IPAD:
Idea: When your finger touches the screen, add a circle to the touch position of the finger in the onTouchStart event; when your finger starts to slide, constantly draw lines from the previous touch point to the next dot in onTouchMove.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Canvas</title>
<meta name = "viewport" content = "width = device-width, user-scalable = no">
</head>
<body>
<canvas >/canvas>
<script type="text/javascript" src="canvasScript.js" charset="utf-8"></script>
</body>
</html>
JS:
//get canvas
var canvas = document.getElementById("canvas");
//full screen
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//Whether it supports touch
var touchable = 'createTouch' in document;
if (touchable) {
canvas.addEventListener('touchstart', onTouchStart, false);
canvas.addEventListener('touchmove', onTouchMove, false);
}
else
{
alert("touchable is false !");
}
//Last touch coordinates
var lastX;
var lastY;</p><p>var ctx =canvas.getContext("2d");
ctx.lineWidth=10;//The thickness of the brush
ctx.strokeStyle="#FF0000";//Brush color</p><p>//Touch start event
function onTouchStart(event) {
event.preventDefault();
lastX=event.touches[0].clientX;
lastY=event.touches[0].clientY;
drawRound(lastX,lastY);</p><p>}
//Touch sliding event
function onTouchMove(event) {
try
{
event.preventDefault();
drawLine(lastX,lastY, event.touches[0].clientX, event.touches[0].clientY);
lastX=event.touches[0].clientX;
lastY=event.touches[0].clientY;
}
catch(err){
alert( err.description);
}</p><p>}</p><p>//Draw a circle
function drawRound(x,y)
{
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(x,y,5,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
//Draw lines
function drawLine(startX,startY,endX,endY)
{
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(startX,startY);
ctx.lineTo(endX, endY);
ctx.stroke();
}
Key points:
ctx.lineCap=round; Sets the style cap at the end of the drawn line to a circle. This is very important, otherwise there will be broken bands in places where the line angle changes greatly.
event.preventDefault(); cancels the default action of the event. This method must be adjusted during the sliding event. Otherwise, the default sliding event of the browser will be triggered when sliding, and the page drop-down effect will occur, and you will not be able to draw it.