Canvas 绘图

[web前端开发]中国林业大学
实现：移动鼠标进行绘图，抬起鼠标绘图结束
【参考】
HTML 5 Canvas 参考手册
 HTML DOM Event 对象
1024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    #myCanvas{
        border: 1px solid black;
    }
    </style>
</head>
<body>
    <canvas id='myCanvas' height="480" width="860">
    </canvas>
</body>
    <script type="text/javascript">
        var canvas,pen;
        canvas = document.getElementById('myCanvas');
        pen = canvas.getContext('2d');

        pen.lineWidth = 1;
        pen.strokeStyle = 'blue';

        /* 判断绘图时是否按下鼠标 
        绘图结束的点默认为空 */
        var mousePress,last;
        mousePress = false;
        last = null;

        function pos(event){
            /* 当事件被触发时，鼠标指针的水平/垂直坐标 */
            var ex,ey;
            ex = event.clientX;
            ey = event.clientY;
            return{
                x:ex,y:ey
            }
        }
        function start(event){
            mousePress = true;
        }
        function draw(event){
            if(!mousePress)return;
            var xy = pos(event);
            if(last != null){
                /* 	起始一条路径 */
                pen.beginPath();
                /* 	把路径移动到画布中的指定点，不创建线条 */
                pen.moveTo(last.x,last.y);
                /* 添加一个新点，然后在画布中创建从该点到最后指定点的线条 */
                pen.lineTo(xy.x,xy.y);
                /* 绘制已定义的路径 */
                pen.stroke();
            }
            last = xy
        }
        function finish(event){
            mousePress = false;
            last = null;
        }
        canvas.onmousedown = start;
        canvas.onmousemove = draw;
        canvas.onmouseup = finish;
    </script>
</html>

雪急飞绪

发布了36 篇原创文章 · 获赞 3 · 访问量 1740

私信关注

猜你喜欢