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

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!

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.