HTML5 Canvas 应用示例：简易画板

2014-04-30 5 条评论 12,928 次阅读 被赞了 0 次
本文发布于：2014-04-30，最后更新于：2020-09-15，如果内容失效请留言告知。

代码如下：

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" Content="text/html;charset=utf-8">
<head>
    <title>简易画板</title>
    <style>
        #eraseImg{   /*橡皮样式*/
            border:solid;
            color:gray;
            border-radius: 50%;
            width:  5px;
            height: 5px;
            position: absolute;
            display: none;
 
        }
        .eraseSeries{ /*橡皮大小单选按钮组的排列，此div不单独占一行*/
            display: inline-block;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    var c;//获取到的2d画板
    var painting = false;//判断是否正在绘画，即鼠标左键是否长按下去
    var canvas;//画板
    $(function(){
         $(".eraseSeries").hide();//初始状态单选按钮组隐藏
 
        canvas=document.getElementById("myCanvas");
        c=canvas.getContext("2d");
        c.lineCap="round";//设置笔迹边角，否则笔迹会出现断层
        c.strokeStyle="black";//笔迹的颜色
        c.lineWidth=5;//笔迹的粗细
        $("#color").change(function(){//笔迹颜色发生改变时
            if(eraseFlag==true)//处在擦皮状态
            {
                $("#erase").trigger("click");//自动触发橡皮的点击事件，以返回到画笔状态
            }
            c.strokeStyle=$(this).val();//设置画笔状态
            c.lineWidth=$(this).val();
 
        });
 
        $("#fontSize").change(function(){//画笔粗细发生改变
            if(eraseFlag==true)//同上
            {
                $("#erase").trigger("click");
            }
            c.lineWidth=$(this).val();
            c.strokeStyle=$("#color").val();
           //eraseFlag=false;
        });
 
        $(".eraseSeries").click(function(){//橡皮大小发生改变
            var size=$('input[name="eraseSize"]:checked').val();//获取到橡皮单选按钮组的选中值
            sizeE=size;//将该值传到全局变量上，sizeE需要用来控制橡皮样式的位置
            c.lineWidth=size;
            $("#eraseImg").css({"width" :size+"px","height":size+"px"});//橡皮样式大小发生改变
        });
         
        $("#erase").click(function(){//橡皮按钮的点击翻转事件
                if(eraseFlag == false){
                    c.save();//保持上次设置的状态
                    eraseFlag=true;
                    c.strokeStyle="white";
 
                    $("#erase").text("画笔");//改变按钮上的文字
                    $(".eraseSeries").show('fast');//橡皮单选组出现
                  //  $("#eraseImg").show();
                    sizeE=5;
                }else{
                    eraseFlag=false;
                    $("#erase").text("橡皮");
                    $(".eraseSeries").hide('fast');
                    c.restore();//恢复上次画笔的状态（包括颜色，粗细等）
                }
            });
        });
 
        var p_x;//上次鼠标位置
        var p_y;
        var p_x_now;//当前瞬间鼠标位置
        var p_y_now;
        var eraseFlag=false;
        var sizeE;//橡皮大小
 
        $(document).mousedown(function(e){//鼠标按下触发事件
            p_x= e.clientX;//获取位置，并置为上次鼠标位置
            p_y= e.clientY;
            painting = true;//画笔启动标志
 
        });
         
        $(document).mousemove(function(e){//鼠标移动触发事件
            if(eraseFlag==true&& e.clientY>30)//橡皮处在激活状态，并且鼠标Y的位置大于30，也即鼠标在画板内
            {
                //橡皮图像跟随鼠标而动
                $("#eraseImg").animate({left: e.clientX-sizeE+"px",top: e.clientY-sizeE+"px"},0).show('fast');
            }
            else
            {
                $("#eraseImg").hide('fast');
            }
           if(painting==true)//处于画笔激活状态
           {
               //alert(1);
               p_x_now= e.clientX;//当前瞬间的鼠标位置
               p_y_now= e.clientY;
              c.beginPath();//开始路径
               //曲线是由一段段非常小的直线构成，计算机运算速度很快，这是一种以直线迭代画曲线的方式
               c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop);//移动到起始点
               c.lineTo(p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//从起始点画直线到终点
 
               c.stroke();
               c.closePath();//封闭路径，这个很重要，如果路径不封闭，
                             // 那么只要canvas颜色发生改变，所有的之前画过的颜色都发生改变
               p_x = p_x_now;//一次迭代后讲当前的瞬间坐标值赋给上次鼠标坐标值
               p_y = p_y_now;
           }
        });
 
        $(document).mouseup(function(e){//鼠标松开触发事件
           painting=false;//冻结画笔
        });
    </script>
</head>
<body>
    <div >
        <select id="color"  > <!--画笔颜色-->
            <option class="opt" value="red">红色</option>
            <option class="opt" value="yellow">黄色</option>
            <option class="opt" value="blue">蓝色</option>
            <option class="opt" value="black"  selected>黑色</option>
            <option class="opt" value="green">绿色</option>
        </select>
        <select id="fontSize"> <!--画笔大小-->
            <option  value=5 selected>5</option>
            <option  value=10>10</option>
            <option  value=15>15</option>
            <option  value=20>20</option>
            <option  value=30>30</option>
            <option  value=30>50</option>
        </select>
        <button id="erase">擦皮</button> <!--橡皮按钮-->
        <div class="eraseSeries"> <!--橡皮大小-->
            <input type="radio" name="eraseSize" value="5" checked/>5
            <input type="radio" name="eraseSize" value="10"/>10
            <input type="radio" name="eraseSize" value="15"/> 15
            <input type="radio" name="eraseSize" value="20"/> 20
            <input type="radio" name="eraseSize" value="30"/>30
            <input type="radio" name="eraseSize" value="30"/>50
            <input type="radio" name="eraseSize" value="30"/>100
        </div>
    </div>
    <!--<button id="btn">btn</button>-->
    <canvas id="myCanvas" width="1420" height="780" style="border: solid"></canvas> <!--整个画布-->
    <div id="eraseImg"></div> <!--橡皮形状-->
</body>
</html>

来源：http://blog.csdn.net/jiangjianANT/article/details/24461987

相关文章:

Default ThumbnailHTML5 FormData 与无刷新文件上传 Default ThumbnailHTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件 Default ThumbnailHTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理 HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结 Default Thumbnail参加html5年会：HTML5 年度HomeParty暨首届原创游戏大赛颁奖典礼 Default ThumbnailHTML5 postMessage 消息传输与 POST 跨域通信 网站渐进式增强体验(PWA)改造：Service Worker 应用详解 Default ThumbnailH5 活动页之移动端 REM 布局适配方法 Default Thumbnail移动设备(手机)上浏览器全屏隐藏工具栏和菜单栏的设置
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
  1. leoying说道：
    2020年09月15日 2:37 下午
    Google Chrome 85.0.4183.102 Google Chrome 85.0.4183.102 Windows 7 x64 Edition Windows 7 x64 Edition

    我想说的是，首先标题 Canvas 就写错了

    回复
    1. 任侠说道：
      2020年09月15日 2:42 下午
      Google Chrome 85.0.4183.83 Google Chrome 85.0.4183.83 Windows 10 x64 Edition Windows 10 x64 Edition

      已更正，感谢

      回复
  2. WEB学习吧说道：
    2014年07月14日 10:41 下午
    Google Chrome 35.0.1916.114 Google Chrome 35.0.1916.114 Windows XP Windows XP

    HTML 5，现在我还用不上啊。

    回复
  3. 博客大全说道：
    2014年05月11日 10:31 上午
    Google Chrome 30.0.1599.101 Google Chrome 30.0.1599.101 Windows XP Windows XP

    很好的学习博客，收藏了。
    html5现在应该是主流吧

    回复
  4. 林肆说道：
    2014年05月8日 8:15 上午
    Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP

    独立博客的淡季啊，这年头写博客的太少啦。志文兄你也不写点通俗的内容…

    回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code