基于canvas画板原理(H5)

一个简单的小事例,利用canvas实现画板效果。
实现原理:
鼠标事件+canvas
效果图:


image.png

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: gainsboro;
            }
            #cav{
                background: white;
                position: relative;
            }
            #sel{
                display: block;
                width: 1190px;
                height: 30px;
                background: white;
                padding: 5px;
                margin-top: 5px;
                margin-bottom: 5px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
//              获得画板
                var cav = document.getElementById("cav");
//              获得绘画环境
                var cv = cav.getContext('2d');
//              设置画笔默认颜色及粗细
                cv.lineWidth=10;
                //鼠标按下事件
                cav.onmousedown = function(e){
                    ev = window.event||e;
                    var s_l = ev.offsetX||ev.layerX;
                    var s_t = ev.offsetY||ev.layerY;
                    //开始绘制路径
                    cv.beginPath();
                    //画笔起始位置
                    cv.moveTo(s_l,s_t);
//                  鼠标移动事件
                    cav.onmousemove = function(e){
                        var over_ev = window.event||e;
                        var over_l = over_ev.offsetX||over_ev.layerX;
                        var over_t = over_ev.offsetY||over_ev.layerY;
                        //结束位置
                        cv.lineTo(over_l,over_t);
                        //绘制线条
                        cv.stroke();
                    }
                }
                //鼠标抬起事件
                cav.onmouseup = function(){
                    //取消鼠标移动事件
                    cav.onmousemove = null;
                }
                //颜色改变事件
                document.getElementById("ys").onchange = function(){
                    cv.strokeStyle = this.value;
                }
                //改变粗细
                document.getElementById("cx").onchange = function(){
                    var cx = this.value;
                    cv.lineWidth = cx;
                    document.getElementById("cx_txt").innerHTML = cx;
                }
                //橡皮擦
                document.getElementById("xpc").onclick = function(){
                    alert('开启橡皮擦')
                    cv.strokeStyle = 'white';
                }
            }
        </script>
    </head>
    <body>
        <div id="sel">
            画笔颜色:<input type="color" name="" id="ys" value="" />
            画笔粗细:<input type="range" min="1" max="50" value="10" id="cx" />
            <span id="cx_txt">10</span>
            <input type="button" id="xpc" value="橡皮擦" />
        </div>
        <canvas id="cav" width="1200px" height="800px"></canvas>
    </body>
</html>

如有问题欢迎交流。

如转载请注明出处,谢谢!

推荐阅读更多精彩内容