用canvas来手动绘画 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>painting</title>
</head>
<body>
    <canvas class="myCanvas" width="500px" height="500px" style="display: block;margin: auto;background: #ECF3F8;cursor: pointer"></canvas>
    <input type="color" id="color"/>
    <input type="range" id="range" min="1" max="100" value="5"/>
    <span id="show"></span>
</body>
<script>
    window.onload = function(){
        var c = document.getElementsByClassName('myCanvas')[0];//获取节点
        var ctx = c.getContext('2d');//这里面只能是2d表示在二维的画布里写的意思

        var range = document.getElementById('range');//获取节点
        var show = document.getElementById('show');//获取节点
        function change(){//这是改变画笔粗细的函数
            show.innerText= range.value;//span标签里的值即为range标签里选择的大小
            requestAnimationFrame(change);//span标签里的数字随着range的改变而改变，这是递归
        }change();//调用

        var moveNum = false;//声明变量
        c.onmousedown = function (e) {//鼠标按下事件
            var e = e || event;//解决兼容问题
            var x = e.clientX - c.offsetLeft;//找到鼠标的横坐标
            var y = e.clientY - c.offsetTop;//鼠标的纵坐标即
            ctx.beginPath();//起笔
            ctx.lineWidth = range.value;//线条的粗细
            var color = document.getElementById('color');//获取节点
            var val = color.value;//获取节点的值
            ctx.strokeStyle = val;//将颜色的值赋给线条样式

            ctx.moveTo(x,y);//画笔的起点位置
            moveNum = true;//令moveNum等于true，
        };
        c.onmousemove = function(){//鼠标移动事件
            var e = e || event;//兼容问题
            var x = e.clientX - c.offsetLeft;
            var y = e.clientY - c.offsetTop;
            if(moveNum){//如果move为true即为有值的情况下也就是说必须鼠标按下过后才能执行操作
                ctx.lineTo(x,y);//终点，也就是鼠标弹起的情况就停止了绘画
                ctx.stroke();//采用线性的方式绘画
            }
        };
        document.onmouseup = function(){//鼠标弹起事件
            return moveNum = false;//返回moveNum为false即为无值得情况，则什么也不做即结束绘画
        };
    }
</script>
</html>

以上注释只是我个人的想法，可能有理解有误的地方，谢谢

posted on 2017-06-29 15:54  轻触快乐  阅读(273)  评论(0)  编辑  收藏  举报

导航