canvas实现简易画板工具

2016-08-02
Alt text

用canvas实现简易画板工具
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>涂鸦</title>
    <style>
        #canvas1{
            box-shadow: 0 5px 40px black;
        }
    </style>
</head>
<body>
<canvas id="canvas1" width="2000px" height="1000px"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas1');

    var context = canvas.getContext('2d')

    canvas.onmousedown = function (e) {

        var ev = e||window.event;

        var x = ev.clientX - canvas.offsetLeft;
        var y = ev.clientY - canvas.offsetTop;

        context.beginPath();
        context.moveTo(x,y);

        canvas.onmousemove = function (e) {
            var ev = e||window.event;
            var x = ev.clientX - canvas.offsetLeft;
            var y = ev.clientY - canvas.offsetTop;
            console.log(x)
            context.lineWidth = 5;
            context.strokeStyle = "red";

            context.lineTo(x,y);
            context.stroke()
        }
        canvas.onmouseup = function () {
            canvas.onmousemove = null;
        }
    }

</script>
</html>