html5实现一个简单的在线画板


本文摘自PHP中文网,作者V,侵删。

我们先来看看实现效果:

(推荐教程:h5)

6f5da1669c91eaaee38d2259e27767d.png

实现代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <canvas id="canvas" width="600" height="600"></canvas>

        <script type="text/javascript">

            var c = document.getElementById('canvas');

            var ctx = c.getContext('2d');

 

            //画一个黑色矩形

            ctx.fillStyle = 'black';

            ctx.fillRect(0,0,600,300);

 

            //按下标记

            var onoff = false;

            var oldx = -10;

            var oldy = -10;

 

            //设置颜色

            var linecolor = 'white';

 

            //设置线宽

            var linw = 4;

 

            //添加鼠标移动事件

            canvas.addEventListener('mousemove',draw,true);

 

            //添加鼠标按下事件

            canvas.addEventListener('mousedown',down,false);

 

            //添加鼠标弹起事件

            canvas.addEventListener('mouseup',up,false);

 

            function down(event) {

                onoff = true;

                oldx = event.pageX-10;

                oldy = event.pagey-10;

            }

 

            function up() {

                onoff = false;

            }

 

            function draw(event) {

                if(onoff == true) {

                    var newx = event.pageX-10;

                    var newy = event.pageY-10;

                    ctx.beginPath();

                    ctx.moveTo(oldx,oldy);

                    ctx.lineTo(newx,newy);

                    ctx.strokeStyle = linecolor;

                    ctx.lineCap = 'round';

                    ctx.stroke();

 

                    oldx = newx;

                    oldy = newy;

                }

            }

        </script>

    </body>

</html>

免费学习视频分享:html视频教程

以上就是html5实现一个简单的在线画板的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5 meter标签是什么意思?HTML5 meter度量衡如何改变颜色详解

h5段落的使用方法

实例讲解h5移动开发ajax上传多张base64格式图片到服务器

使用html和css的新特性实现响应式布局

HTML5中在元素或者选取的文本被拖动时触发的事件ondrag

h5启动app原生页面的实例方法

HTML5 command标签的用法和<command>标签的使用案例详解

想学好HTML5看什么书好

HTML5、css实现文字阴影效果实例分享

h5设置或返回音频/视频所属的媒体组合的名称的属性mediagroup

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...