文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

js+canvas实现可自动吸附闭合的鼠标绘制多边形

2024-04-02 19:55

关注

本文实例为大家分享了js+canvas实现鼠标绘制多边形的具体代码,可自动吸附闭合,供大家参考,具体内容如下

效果图:

完整代码:(记得引入jQuery)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制多边形</title>
    <script src="jQuery.js"></script>
</head>
<body>
<style>
    canvas {
        border: 1px solid #333;
        display: block;
    }

    input {
        width: 100px;
        margin-left: 200px;
        margin-top: 650px;
    }

    #canvas{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        cursor: crosshair;
    }

    #canvasSave{
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
<!--用来和鼠标进行交互操作的canvas-->
<canvas id="canvas" width="1000px" height="600px"></canvas>
<!--存储已生成的点线,避免被清空-->
<canvas id="canvasSave" width="1000px" height="600px"></canvas>
<input id="deleteCanvas" type="button" value="清空选区">

<script>
    var can = document.getElementById("canvas");
    var ctx = can.getContext('2d');
    var canSave = document.getElementById("canvasSave");
    var ctxSave = canSave.getContext('2d');

    var pointX, pointY;
    var pointArr = [];//存放坐标的数组

    ctx.strokeStyle = 'rgba(102,168,255,1)';//线条颜色
    ctx.lineWidth = 4;//线条粗细
    ctxSave.strokeStyle = 'rgba(102,168,255,1)';//线条颜色
    ctxSave.lineWidth = 4;//线条粗细

    var oIndex = -1;//判断鼠标是否移动到起始点处,-1为否,1为是

    
    $(can).click(function (e) {
        if (e.offsetX || e.layerX) {
            pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
            pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
            var piX,piY;
            if(oIndex > 0 && pointArr.length > 0){
                piX = pointArr[0].x;
                piY = pointArr[0].y;
                //画点
                makearc(ctx, piX, piY, GetRandomNum(2, 2), 0, 180, 'rgba(102,168,255,1)');
                pointArr.push({x: piX, y: piY});
                canvasSave(pointArr);//保存点线同步到另一个canvas
                saveCanvas();//生成画布
            }else {
                piX = pointX;
                piY = pointY;
                makearc(ctx, piX, piY, GetRandomNum(2, 2), 0, 180, 'rgba(102,168,255,1)');
                pointArr.push({x: piX, y: piY});
                canvasSave(pointArr);//保存点线同步到另一个canvas
            }
        }
    });

    
    $(can).mousemove(function (e) {
        if (e.offsetX || e.layerX) {
            pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
            pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
            var piX,piY;
            
            ctx.clearRect(0, 0, can.width, can.height);
            
            makearc(ctx, pointX, pointY, GetRandomNum(4, 4), 0, 180, 'rgba(102,168,255,1)');

            if (pointArr.length > 0) {
                if((pointX > pointArr[0].x-15 && pointX < pointArr[0].x+15) && (pointY > pointArr[0].y-15 && pointY < pointArr[0].y+15)){
                    if(pointArr.length>1){
                        piX = pointArr[0].x;
                        piY = pointArr[0].y;
                        ctx.clearRect(0, 0, can.width, can.height);
                        makearc(ctx, piX, piY, GetRandomNum(4, 4), 0, 180, 'rgba(102,168,255,1)');
                        oIndex = 1;
                    }
                }else {
                    piX = pointX;
                    piY = pointY;
                    oIndex = -1;
                }
                
                ctx.beginPath();
                ctx.moveTo (pointArr[0].x, pointArr[0].y);
                if (pointArr.length > 1){
                    for (var i = 1; i < pointArr.length; i++){
                        ctx.lineTo(pointArr[i].x, pointArr[i].y);
                    }
                }
                ctx.lineTo(piX, piY);
                ctx.fillStyle = 'rgba(161,195,255,1)';//填充颜色
                ctx.fill();//填充
                ctx.stroke();//绘制
            }
        }
    });

    // 存储已生成的点线
    function canvasSave(pointArr){
        ctxSave.clearRect(0, 0, ctxSave.width, ctxSave.height);
        ctxSave.beginPath();
        if (pointArr.length > 1){
            ctxSave.moveTo (pointArr[0].x, pointArr[0].y);
            for (var i = 1; i < pointArr.length; i++){
                ctxSave.lineTo(pointArr[i].x, pointArr[i].y);
                ctxSave.fillStyle = 'rgba(161,195,255,1)';//填充颜色
                //ctxSave.fill();
                ctxSave.stroke();//绘制
            }
            ctxSave.closePath();
        }
    }

    
    function saveCanvas() {
        ctx.clearRect(0, 0, can.width, can.height);
        ctxSave.closePath();//结束路径状态,结束当前路径,如果是一个未封闭的图形,会自动将首尾相连封闭起来
        ctxSave.fill();//填充
        ctxSave.stroke();//绘制
        pointArr = [];
    }

    
    $('#deleteCanvas').click(function () {
        ctx.clearRect(0, 0, can.width, can.height);
        ctxSave.clearRect(0, 0, canSave.width, canSave.height);
        pointArr = [];
    });

    
    function isCanvasBlank(canvas) {
        var blank = document.createElement('canvas');//创建一个空canvas对象
        blank.width = canvas.width;
        blank.height = canvas.height;
        return canvas.toDataURL() == blank.toDataURL();//为空 返回true
    }

    
    function GetRandomNum(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        return (Min + Math.round(Rand * Range));
    }
    function makearc(ctx, x, y, r, s, e, color) {
        ctx.clearRect(0, 0, 199, 202);//清空画布
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.arc(x, y, r, s, e);
        ctx.fill();
    }


</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯