How to make a simple Sketchpad with HTML5

This article mainly introduces HTML5 how to make a simple drawing board, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The code is as follows:

Http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

Canvas {border:2px solid # 000;}

$(document) .ready (function () {

Var canvas=document.getElementById ("draw")

Var draw=canvas.getContext ("2d")

Draw.lineWidth=5; / / Line thickness

Draw.strokeStyle= "red"; / / Color

Var godraw=false

/ / Press the mouse

$("# draw") .mousedown (function (e) {

/ / exact coordinates

Var mouseX=e.pageX-this.offsetLeft

Var mouseY=e.pageY-this.offsetTop

Draw.moveTo (mouseX,mouseY)

Godraw=true

})

/ / release the mouse

$("# draw") .mouseup (function (e) {

Godraw=false

})

/ / move the mouse

$("# draw") .mousemove (function (e) {

If (godraw) {

Var mouseX=e.pageX-this.offsetLeft

Var mouseY=e.pageY-this.offsetTop

Draw.lineTo (mouseX+4,mouseY+4)

Draw.stroke ()

}

})

})

Thank you for reading this article carefully. I hope the article "how to make a simple Sketchboard in HTML5" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!