一个简单的html5画板

最新推荐文章于 2024-08-16 17:49:51 发布

hi_dzj

最新推荐文章于 2024-08-16 17:49:51 发布

阅读量1.5k

点赞数

分类专栏： JavaScript HTML

本文链接：https://blog.csdn.net/hi_dzj/article/details/9046127

版权

HTML 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

效果图如下：利用鼠标来画图

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Paint</title>
</head>
<body>
    <canvas id="container" width="500" height="400" style="border: solid 1px">your browser does not support the canvas tag </canvas>

    <script type="text/javascript">
        var canvas;
        var context;
        canvas = document.getElementById('container');
        context = canvas.getContext('2d');



        //注册相关鼠标事件
        canvas.onmouseup = function(e) {
            flag = false;

        }

        canvas.onmousemove = function(e) {
            if (flag == true) {
                addClick(e.pageX, e.pageY, flag);
                redraw();
            }
        }

        canvas.onmousedown = function(e) {
            flag = true;
            redraw();
        }

        var flag; //是否被按下
        var point = {};
        point.isFirst = true;
        var clickX = new Array();
        var clickY = new Array();
        var clickDrag = new Array();

        function addClick(x, y, isClick) {
            clickX.push(x);
            clickY.push(y);
            clickDrag.push(isClick);
        }

        function redraw() {
            //设置上下文的样式
            // 创建渐变
            var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
            gradient.addColorStop("0", "magenta");
            gradient.addColorStop("0.5", "blue");
            gradient.addColorStop("1.0", "red");
            // 用渐变进行填充
            context.strokeStyle = gradient;
            //context.strokeStyle = "#FFB33C";
            context.lineWidth = 5;
            context.lineJoin = "round";
            //开始对每一个位置进行画线
            while (clickX.length > 0) {
                //保存上一个结点
                point.srcx = point.descx;
                point.srcy = point.descy;
                //保存当前结点
                point.descx = clickX.pop();
                point.descy = clickY.pop();
                //记录是否点下
                point.drag = clickDrag.pop();
                //开始路径
                context.beginPath();

                if (point.isFirst == false && point.drag == true) {
                    context.moveTo(point.srcx, point.srcy);
                }
                else {
                    context.moveTo(point.descx-1, point.descy);
                    point.isFirst == false;
                }

                context.lineTo(point.descx, point.descy);

                context.closePath();
                context.stroke();

            }
        }
    </script>

</body>
</html>

实际效果如图

your browser does not support the canvas tag