使用canvas做的画图板

最新推荐文章于 2026-02-05 12:33:58 发布

原创最新推荐文章于 2026-02-05 12:33:58 发布 · 435 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个基于HTML5 Canvas的简易画图板实现。通过监听鼠标点击和移动事件，可以实现在画布上绘制线条的功能。代码中详细展示了如何使用JavaScript操作Canvas元素，包括获取画布上下文、设置线条颜色以及响应鼠标事件等。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>画图板</title>
        <style type="text/css">
            canvas{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
	
        <canvas id="myCanvas" width="1000" height="600"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        canvas.onmousedown=function(e){
            e=e||window.event;
            var startX=e.clientX-canvas.offsetLeft;
            var startY=e.clientY-canvas.offsetTop;
            console.log(startX+"-----"+startY);
            context.moveTo(startX,startY);
            document.onmousemove = function(e){
                var endX=e.clientX-canvas.offsetLeft;
                var endY=e.clientY-canvas.offsetTop;
                context.lineTo(endX,endY);
                context.stroke();
                context.strokeStyle='red';
            }
            document.onmouseup=function(){
                document.onmousemove = null;//清除掉鼠标移动事件
                document.onmouseup = null;//清除掉鼠标抬起事件
            }
        }
		var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        canvas.onmousedown=function(e){
            e=e||window.event;
            var startX=e.clientX-canvas.offsetLeft;
            var startY=e.clientY-canvas.offsetTop;
            console.log(startX+"-----"+startY);
            context.moveTo(startX,startY);
            document.onmousemove = function(e){
                var endX=e.clientX-canvas.offsetLeft;
                var endY=e.clientY-canvas.offsetTop;
                context.lineTo(endX,endY);
                context.stroke();
                context.strokeStyle='red';
            }
            document.onmouseup=function(){
                document.onmousemove = null;//清除掉鼠标移动事件
                document.onmouseup = null;//清除掉鼠标抬起事件
            }
        }
    </script>
</html>