How to realize the function of Artboard Brush with html5
This article mainly introduces html5 how to achieve the paintboard brush function, 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.
To achieve the function of artboard brush, the effect is as follows:
one
two
three
four
five
six
seven
eight
1 $(function () {)
2 var canvas = document.getElementById ("box1")
3 if (canvas = = null)
4 return false
5 var context = canvas.getContext ("2d")
6 / / Mark begins to write
7 var start = false
8 $(canvas) Mousemove (function (event) {
9 / / displays the current mouse position
10 $("# lab_X"). Text (event.pageX)
11 $("# lab_Y"). Text (event.pageY)
12 if (start) {
13 context.lineTo (event.pageX, event.pageY)
14 context.stroke ()
15}
16})
17 / / press the mouse to start writing
18 $(canvas). Mousedown (function () {
19 context.beginPath ()
20 context.moveTo ($("# lab_X") Text (), $("# lab_Y"). Text ()
21 start = true
22})
23 / / the mouse is raised to end writing
24 $(canvas). Mouseup (function () {
twenty-five
26 start = false
27 context.closePath ()
28})
29})
Thank you for reading this article carefully. I hope the article "how to realize the function of Sketchboard Brush in html5" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
