canva标签， 绘制多边形，可拉动顶点坐标，修改多边形、获取各顶点坐标，鼠标点击判断是否在多边形内功能模块!

最新推荐文章于 2024-06-04 23:11:16 发布
最新推荐文章于 2024-06-04 23:11:16 发布
阅读量2.9k 收藏 6
点赞数 4
分类专栏： html 文章标签： canvas javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35201029/article/details/119826758
版权

canva标签， 绘制多边形

直入主题！！
前端开发canva标签，
绘制多边形，可拉动顶点坐标，修改多边形、获取各顶点坐标，鼠标点击判断是否在多边形内功能模块。

使用
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas绘制多边形</title>
    <script src="../JS/jquery.min.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 id="canvas" width="1000px" height="600px"></canvas>
    <!--存储已生成的点线，避免被清空-->
    <canvas id="canvasSave" width="1000px" height="600px"></canvas>
    <input id="deleteCanvas" type="button" value="清空选区">
    <p id="testid"></p>
    <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 = 2; //线条粗细
        ctxSave.strokeStyle = 'rgba(102,168,255,1)'; //线条颜色
        ctxSave.lineWidth = 2; //线条粗细

        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(pointArr); //生成画布
                } 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(); //绘制
            var description = "";
            var i = pointArr.length - 1;
            for (var i = 0; i < pointArr.length - 1; i++) {
                var property = pointArr[i];
                description += i + 1 + " = " + property.x + "," + property.y + "<br>";
            }
            document.getElementById("testid").innerHTML = description;
            pointArr = [];

        }

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

        /*验证canvas画布是否为空函数*/
        function isCanvasBlank(canvas) {
            var blank = document.createElement('canvas'); //创建一个空canvas对象
            blank.width = canvas.width;
            blank.height = canvas.height;
            return canvas.toDataURL() == blank.toDataURL(); //为空 返回true
        }

        /*canvas生成圆点*/
        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>

因代码过多 以下功能
可拉动顶点坐标，修改多边形、获取各顶点坐标，鼠标点击判断是否在多边形内功能模块。
私聊、留言、下载、可提供现成的Demo

923802169
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
canvas学习day3——判断点，鼠标点击是否在指定路径中
weixin_41571938的博客
04-29 675
ctx.isPointInPath( 要判断的点x轴坐标，要判断的点y轴坐标 ) 1、获取ctx对象 2、增加监听事件 3、ctx.isPointInPath <body> <canvas id="cvs"></canvas> <script> var cvs = document.querySelector( '#cvs' ); var ctx = cvs.getContext( '2d' );
canvas绘图任意矩形、多边形
10-19
canvas鼠标拖动绘制任意矩形、多边形；在index.html页面中，根据drawType来绘制形状，矩形：drawType = 'rect'; 多边形：drawType =polygon
canvas画布标签详解
m0_55557411的博客
12-12 1223
canvas画布标签详解
css总结19:HTML5 Canvas(画布)
anjiye7641的博客
04-02 243
1 <canvas> 标签定义图形，比如图表和其他图像。 例1:简单使用: <canvas id="Canva" width="200" height="100" style="background: yellowgreen"></canvas> 2Canvas 坐标 canvas 是一个二维网...
canva标签的基础使用
2301_76901566的博客
09-10 88
在HTML5中，canvas标签是一个强大的元素，它允许开发者使用JavaScript在网页上绘制图形、动画和其他复杂的视觉效果。通过canvas标签，我们可以实现更加丰富和交互性的网页效果。以上代码将在画布上绘制一个三角形，起始点坐标为(100, 100)，依次连接到(200, 100)和(150, 200)。以上代码将在画布上绘制一段文本，起始点坐标为(50, 50)，文本内容为"Hello, world!以上代码将在画布上绘制一个红色矩形，起始点坐标为(50, 50)，宽度为200，高度为100。
js. canvas画多边形并获取到当前的坐标值
weixin_40816648的博客
10-24 644
当用户在 Canvas 上按下鼠标并移动时，会触发 mousedown 和 mousemove 事件，从而绘制多边形的边线。当用户松开鼠标或离开 Canvas 区域时，绘制结束，我们可以通过 stopDrawing 函数获取到绘制多边形的顶点坐标数组。在绘制过程中，我们将每个顶点的坐标保存在 polygonVertices 数组中。你可以在 stopDrawing 函数中使用 polygonVertices 数组，对顶点坐标进行进一步的处理。
canvas 鼠标点击绘制任意多边形、鼠标拖动改变形状
zcylyzhi4的博客
09-09 4083
文章目录前言一、通用代码封装二、canvas类的封装1.定义类2.初始化3.初始化鼠标事件3.鼠标事件处理4.绘制多边形及顶点总结 前言 本文主要介绍如何通过鼠标点击绘制任意多边形，以及通过鼠标移动改变多边形的形状 一、通用代码封装 class Point { constructor(opts = {}) { this.x = opts.x || 0; this.y = opts.y || 0; } } const
canvas 鼠标绘制多边形，可自动吸附闭合
HuangsTing的博客
01-15 4046
完整代码：（记得引入jQuery） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas绘制多边形</title> <script src="jQuery.js"></script&gt...
vue canvas 绘制多个多边形，并且可以根据坐标数据回显
weixin_42178050的博客
04-07 1525
vue canvas 绘制多个多边形，并且可以根据坐标数据回显
canva绘制多边形.zip
08-20
纯前端开发canva标签，绘制多边形，可拉动顶点坐标，修改多边形、获取各顶点坐标...
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
09-28
在Canvas上绘制的东西是不能相应鼠标事件的，但是使用jTopo添加事件非常简单，下面有个示例，大家可以参考下
详解基于 Canvas 手撸一个六边形能力图
01-19
六边形能力图如下，由 6 个 六边形组成，每一个顶点代表其在某一方面的能力。这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图。当然，你也可以基于其他开源的 js 方案来实现，如 EChars.js 等。  ...
canvas 绘制简单多边形
m0_61801872的博客
08-16 1485
canva绘制多边形
基于jeecgboot-vue3的Flowable流程-待办任务（一）
宁波阿成的博客
06-03 426
基于jeecgboot-vue3的Flowable流程-待办任务（一）
手写最小的 Agent 系统 — Tiny Agent
安静的软件工程师
06-03 731
手写最小的 Agent 系统 — Tiny Agent
Typescript高级: 深入理解extends keyof语法
Wang的专栏
06-02 805
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
KeyExpirationEventMessageListener监听器的使用
qq_47910339的博客
05-31 520
KeyExpirationEventMessageListener监听器的使用
JavaScript第九讲：BOM编程
最新发布
星途码客的博客
06-04 1431
今天星途给大家带来JavaScript倒数第二部分知识：BOM编程，希望对码客们有帮助。
在update里判断鼠标按下时是否按在某个canva的list中某个list[i]的子物体、孙物体、重孙物体等上面
07-11
要在 Update 方法中判断鼠标按下时是否按在某 Canvas 下的 List 中的子物体、孙物体、重孙物体等上面，你可以使用以下方法```csharp using UnityEngine; using UnityEngine.EventSystems; using System.Collections....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值