How to use HTML5 to make a drawing board
Today, I would like to share with you how to use HTML5 to do drawing board related knowledge, the content is detailed, logic is clear, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's learn about it.
The first thing to note is that instead of drawing with a mouse, you use your fingers on a touch device, such as ipad.
To make a drawing board, it is naturally realized by using html5's canvas. In canvas we can draw circles, rectangles, custom lines and so on. This time, it is mainly realized by drawing circles and lines. Response to touch events is supported in html.
OnTouchStart touch start
OnTouchMove Touch sliding
OnTouchEnd Touch end
With these events, it is easy for us to draw with our fingers in the browser.
Effects on IPAD:
Image
Idea: add a circle to the position of the finger in the onTouchStart event when the finger touches the screen; when the finger starts to slide, continue to draw lines from the previous touch point to the next point in the onTouchMove.
HTML:
Copy the code
The code is as follows:
Canvas
JS:
Copy the code
The code is as follows:
/ / get canvas
Var canvas = document.getElementById ("canvas")
/ / full screen
Canvas.width=window.innerWidth
Canvas.height=window.innerHeight
/ / whether touch is supported
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
Var ctx = canvas.getContext ("2d")
Ctx.lineWidth=10;// brush thickness
Ctx.strokeStyle= "# FF0000"; / / Brush Color
/ / Touch start event
Function onTouchStart (event) {
Event.preventDefault ()
LastX=event.touches [0] .clientX
LastY=event.touches [0] .clientY
DrawRound (lastX,lastY)
}
/ / 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)
}
}
/ / draw a circle
Function drawRound (XBI y)
{
Ctx.fillStyle= "# FF0000"
Ctx.beginPath ()
Ctx.arc (xmeme ypcro 5pr 0pr Math.PIQR 2je true)
Ctx.closePath ()
Ctx.fill ()
}
/ / draw a line
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 be round. This is critical, otherwise the band will be broken where the angle of the line changes greatly.
Image
Event.preventDefault (); cancels the default action for the event. Be sure to adjust this method in a sliding event. Otherwise, the browser's default sliding event will be triggered when you slide, and the effect of the page drop-down will occur, and you will not be able to draw.
These are all the contents of the article "how to use HTML5 to make a drawing board". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
