How to make a simple Sketchpad Code with html5

What this article shares with you is about how to write the simple artboard code made by html5. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Making simple Sketchpad with HTML5

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 ()

}

})

})

Effect picture

The above is how to write the simple sketchboard code made by html5. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.