Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.