2.11_多边形的绘制

最新推荐文章于 2021-12-21 16:00:15 发布
最新推荐文章于 2021-12-21 16:00:15 发布
阅读量367 收藏 1
点赞数
分类专栏： HTML5_CANVAS练习案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71106828
版权

2.11_多边形的绘制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多边形的绘制</title>
        <style>
            body{
                background: #eee;
            }
            #controls{
                position: absolute;
                left: 25px;
                top: 25px;
            }
            #canvas{
                background: #fff;
                cursor: pointer;
                margin-left: 10px;
                margin-top: 10px;
                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1050" height="600"></canvas>
        <div id="controls">
            描边的颜色：
            <select id="strokeStyleSelect">
                <option value="red">red</option>
                <option value="green">green</option>
                <option value="blue">blue</option>
                <option value="orange">orange</option>
                <option value="cornflowerblue" selected>cornflowerblue</option>
                <option value="goldenrod">goldenrod</option>
                <option value="navy">navy</option>
                <option value="purple">purple</option>
            </select>
            填充的颜色：
            <select id="fillStyleSelect">
                <option value="red">red</option>
                <option value="green">green</option>
                <option value="blue">blue</option>
                <option value="orange">orange</option>
                <option value="cornflowerblue" selected>cornflowerblue</option>
                <option value="goldenrod">goldenrod</option>
                <option value="navy">navy</option>
                <option value="purple">purple</option>
            </select>
            多边形边数：
            <select id="sidesSelect">
                <option value="3" selected>3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>

            起始角度：
            <input id="startAngleSelect" type="number" value="0" />

            填充：
            <input id="fillCheckbox" type="checkbox" checked />
            <input id="eraseAllButton" type="button" value="擦除全部线条" />
        </div>
    </body>
    <script>
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),

            strokeStyleSelect = document.getElementById('strokeStyleSelect'),
            fillStyleSelect = document.getElementById('fillStyleSelect'),
            sidesSelect = document.getElementById('sidesSelect'),

            startAngleSelect = document.getElementById('startAngleSelect'),
            fillCheckbox = document.getElementById('fillCheckbox'),
            eraseAllButton = document.getElementById('eraseAllButton'),

            drawingSurfaceImageData,
            mousedown ={},
            rubberbandRect = {},
            dragging = false,
            fillColor= fillCheckbox.checked,
            sidesNum = parseInt(sidesSelect.value),
            startAngle = parseInt(startAngleSelect.value)*Math.PI/180; //起始角度转弧度

            Point = function (x,y){
                this.x = x ;
                this.y = y ;
            }

            //初始化
            context.strokeStyle = strokeStyleSelect.value;
            context.fillStyle = fillStyleSelect.value;
            drawGrid('lightgray',10,10);

            //事件控制器
            canvas.onmousedown = function (e){
                var loc;
                loc = windowToCanvas(e.clientX,e.clientY);
                e.preventDefault();
                saveDrawingSurface();
                mousedown.x = loc.x;
                mousedown.y = loc.y;
                dragging = true;

            }
            canvas.onmousemove = function(e){
                var loc;
                if(dragging){
                    e.preventDefault();
                    restoreDrawingSurface();
                    loc = windowToCanvas(e.clientX,e.clientY);
                    updateRubberband(loc);
                }
            }
            canvas.onmouseup = function (e){
                var loc;

                loc = windowToCanvas(e.clientX,e.clientY);
                restoreDrawingSurface();
                updateRubberband(loc);
                dragging = false;
            }

            strokeStyleSelect.onchange = function(){
                context.strokeStyle = strokeStyleSelect.value;
            }

            fillStyleSelect.onchange = function (){
                context.fillStyle = fillStyleSelect.value;
            }

            sidesSelect.onchange = function(){
                sidesNum = parseInt(sidesSelect.value);
            }

            fillCheckbox.onchange = function(){
                fillColor= fillCheckbox.checked;
            }

            startAngleSelect.onblur = function(){
                startAngle = parseInt(startAngleSelect.value)*Math.PI/180;
            }

            eraseAllButton.onclick = function(){
                context.clearRect(0,0,canvas.width,canvas.height);
                drawGrid('lightgray',10,10);
            }
            //更新橡皮筋
            function updateRubberband(loc){
                updateRubberbandRectangle(loc);
                drawRubberbandShape();
            }
            //监测矩形
            function updateRubberbandRectangle(loc){
                rubberbandRect.width = Math.abs(loc.x-mousedown.x);
                rubberbandRect.height = Math.abs(loc.y-mousedown.y);
                if(loc.x>mousedown.x){
                    rubberbandRect.left = mousedown.x;
                }else{
                    rubberbandRect.left = loc.x;
                }
                if(loc.y>mousedown.y){
                    rubberbandRect.top = mousedown.y;
                }else{
                    rubberbandRect.top = loc.y;
                }
            }
            //画形状
            function drawRubberbandShape(){
                createPolygonPath(mousedown.x,mousedown.y,rubberbandRect.width,sidesNum,startAngle); //创建多边形路径
                context.stroke();
                if(fillColor){
                    context.fill();
                }
            }
            //绘制多边形路径
            //参数设置centerX,centerY：多边形中心，半径，边数，起始角度
            function createPolygonPath(centerX,centerY,radius,sidesNum,startAngle){
                var points = getPolygonPoints(centerX,centerY,radius,sidesNum,startAngle);
                console.log(points);
                context.beginPath();
                context.moveTo(points[0].x,points[0].y);
                for(var i=1;i<sidesNum;i++){
                    context.lineTo(points[i].x,points[i].y);
                }
                context.closePath();
            }
            //得到多边形各个角度在canvas中的坐标
            function getPolygonPoints(centerX,centerY,radius,sidesNum,startAngle){
                var points = [],
                    angle =startAngle || 0;
                for(var i=0;i<sidesNum;i++){
                    points.push(new Point(centerX+radius*Math.cos(angle),centerY-radius*Math.sin(angle)));
                    angle += 2*Math.PI/sidesNum;
                }
                return points;
            }
            //画指示线
            function drawGuidewires(x,y){
                context.save();
                context.strokeStyle = 'rgba(0,0,230,0.4)';
                context.lineWidth = 0.5;
                drawVerticlLine(x);
                drawHorizontalLine(y);
                context.restore();

            }
            //画垂直指示线
            function drawVerticlLine(x){
                context.beginPath();
                context.moveTo(x+0.5,0);
                context.lineTo(x+0.5,context.canvas.height);
                context.stroke();
            }
            //画水平指示线
            function  drawHorizontalLine(y){
                context.beginPath();
                context.moveTo(0,y+0.5);
                context.lineTo(context.canvas.width,y+0.5);
                context.stroke();
            }
            //保存画布
            function saveDrawingSurface(){
                drawingSurfaceImageData = context.getImageData(0,0,canvas.width,canvas.height);
            }
            //恢复画布
            function restoreDrawingSurface(){
                 context.putImageData(drawingSurfaceImageData,0,0);
            }
            //定位到canvas中的坐标
            function windowToCanvas(x,y){
                var bbox = canvas.getBoundingClientRect();
                return{
                    x:x-bbox.left*(canvas.width/bbox.width),
                    y:y-bbox.top*(canvas.height/bbox.height)
                }
            }
            //绘制网格
            function drawGrid(color,stepX,stepY){
                context.save();

                context.strokeStyle = color;
                context.lineWidth = 0.5;

                for(var i=stepX+0.5;i<context.canvas.width;i+=stepX){
                    context.beginPath();
                    context.moveTo(i,0);
                    context.lineTo(i,context.canvas.height);
                    context.stroke();
                }

                for(var i=stepY+0.5;i<context.canvas.height;i+=stepY){
                    context.beginPath();
                    context.moveTo(0,i);
                    context.lineTo(context.canvas.width,i);
                    context.stroke();
                }
                context.restore();
            }

    </script>
</html>
信封中的阳光
关注
专栏目录
统信系统UOS桌面版V20 用户手册
Reyn_观极
07-27 1万+
UOS桌面版V20用户手册。
Graphics类及相关类详解
窝。。。
07-25 6232
如果发现有什么错误地方，请指正，本文章仅仅是个人的了解和学习结果。 本文章介绍Graphics类的使用并通过demo进行了解，至于User32.Dll的使用在其他文章进行详细介绍。1.相关介绍。 2.属性。 3.函数。 4.创建Graphics。 5.注意事项 6.Demo。个人理解:Graphics是一个画家，而创建Graphics的参数Handle或者Image等为画板,当Graphics进行绘
实例094绘制多边形
复行数十步
05-06 212
Point 结构 https://docs.microsoft.com/zh-cn/dotnet/api/system.drawing.point?view=netcore-3.1 构造函数 Point(Int32) 使用由整数值指定的坐标初始化Point类的新实例。 Point(Int32, Int32) 用指定坐标初始化Point类的...
OpenGL编程（六）通过三角形绘画出3D模型
晨曦的博客
08-07 1025
使用三角形绘制3D模型 三角形是基本的多边形，任何多变形都能由三角形组成。三角形是由三个顶点的连线组成。三个点分别是v0；v1；v2。 1、绕法 从某个顶点开始，有两种连线的方法，顺时针和逆时针，这是两种不同的绕法。 2、连接多个三角形 三角形能拼出任何多边形平面或曲面。所以对于平面或曲面，我们只需要保存组成这个面的所有三角形的顶点以及拼法即可。例如某个面有n个三角形组成，我们...
绘制多边形
coollego的博客
12-21 478
java绘制多边形
如何画一个正多边形
张新强的CSDN博客
12-13 4563
本文由BarryZhang原创，同时首发于barryzhang.com，简书，非商业转载请注明作者和原文链接。 场景给定一个指定的正方形的区域，要求在该区域内画一个正N边形（正三角形、正方形、正五边形……） public static void drawPolygon (RectF rect, Canvas canvas, Paint p, int n) { // draw…… }分析要用到
chand_colorfigs chand_colorfigs chand_colorfigs
07-29
这份材料详细介绍了如何利用GDI+（Graphics Device Interface Plus）在Windows应用程序中绘制各种图形元素，包括线、矩形、曲线、多边形等，并探讨了不同类型的画笔、填充模式以及图形变换方法。 **知识点详解：** ...
HTML5 Canvas核心技术 图形、动画与游戏开发
09-19
- **2.11 多边形的绘制**：演示如何绘制多边形。 - **2.12 高级路径操作** - **2.12.1 拖动多边形对象**：介绍如何实现多边形对象的拖动功能。 - **2.12.2 编辑贝塞尔曲线**：演示如何动态编辑贝塞尔曲线。 - **...
Labelme标注数据，使用Mask RCNN训练自己的数据集
TW的博客
01-07 3734
代码：https://github.com/matterport/Mask_RCNN 训练环境：Ubuntu系统 一、数据准备 准备好数据图像，使用labelme进行多边形标注 1. 安装labelme 必须要有深度学习环境（安装annaconda） 打开cmd激活base环境（activate base） 使用命令 pip install labelme安装labelme工具 2. 安装完成后在命令行输入labelme回车即可打开labelme工具 点击opendir打开需要标注图片所在目录，点击c
Qwt扩展之-数据拾取
尘中远的程序开发记录
06-01 1万+
在文章之前，首先看看这篇文章要实现的效果： 数据拾取就是在鼠标经过线条时，会捕获一些特征数据，上图是捕获离鼠标最接近的点。Qt的Qwt绘图组件提供了拾取数据的现成的类，同时也留有非常好的接口，用户可以任意扩展，下面就介绍Qwt专门负责拾取数据及鼠标跟踪用的QwtPicker及其子类。并对其扩展，构建一个用于显示鼠标经过图像时捕获最近点的拾取器
Canvas 入门4 鼠标事件综合应用 橡皮筋选取框
编程圈子-谢厂节的博客
12-06 1487
本系列文章接下来部分学习资源来自《HTML5 Canvas核心技术 图形、动画与游戏开发》示例 橡皮筋式线条绘制<html> <head> <title>Canvas tutorial</title> <style> body>{background:#eee;} #controls{position:absolute;left:25px;top:25px
使用canvas画多边形
chenlunju的专栏
02-09 2267
使用canvas绘制多边形 效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </hea.
Python 之 使用 PIL 库做图像处理（pillow+ImageDraw）
热门推荐
猎摘互联网软件测试业界技术文章专用博客
07-19 1万+
1. 简介。     图像处理是一门应用非常广的技术，而拥有非常丰富第三方扩展库的 Python 当然不会错过这一门盛宴。PIL （Python Imaging Library）是 Python 中最常用的图像处理库，目前版本为 1.1.7，我们可以 在这里 下载学习和查找资料。     Image 类是 PIL 库中一个非常重要的类，通过这个类来创建实例可以有直接载入图像文件，读取处
【Visual C++】游戏开发笔记三十九 浅墨DirectX教程之七 他山之石：几种几何体的快捷绘制法...
轻轻草原
01-07 265
本系列文章由zhmxy555（毛星云）编写，转载请注明出处。 文章链接：http://blog.csdn.net/zhmxy555/article/details/8475261 作者：毛星云（浅墨）邮箱：happylifemxy@163.com 本篇文章里，我们对Direct3D之中几种几何体的简洁绘制方法进行了详细的剖析，最后依旧是提供文章配套的详细注释的demo源代码的欣赏，并在文...
【绘制】HTML5 Canvas 绘画画板，实现鼠标画线条，画矩形或选区（图文、示例）
苏一恒
09-01 6178
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 目录 介绍 思路 画直线 画矩形选区 其他事项 项目演示 画直线 画矩形选区 代码解读 拖拽时发生的事情 ...
Android OpenGL ES （四）基础图形、多边形的绘制
android开发笔记
08-08 725
基础图形绘制 之前讲解过，OpenGL ES中，只提供了3种基本图形：点、线、三角形。而其他我们熟知的图形，都是基于这3种基本图形处理拼接合成的。那么本章节我们先从OpenGL中给我们提供的3种基础图形讲起，再介绍下其他图形的绘制。 基础图形绘制API /** * 使用顶点数据绘制图形 */ GLES20.glDrawArrays(int mode, int first, int c...
CANVAS绘制多边形
sunyiban的专栏
08-03 1678
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
rinex2.11_gps pseudorange point positioning
最新发布
12-18
RINEX（Receiver INdependent EXchange）格式是一种通用的GPS观测数据文件格式，旨在促进不同厂家的GPS接收机数据之间的交流和共享。 RINEX 2.11版本是GPS伪距点位解算的一种方法，它通过记录卫星发出的信号并由接收机接收到的信号来测量接收机与卫星之间的时间差和距离差，从而计算出接收机的位置。 伪距是指卫星信号发出时的时刻与接收机接收到信号时的时刻之间的时间差，通过乘以光速，可以得到接收机与卫星之间的距离差。在RINEX 2.11中，伪距数据是接收机记录的观测数据之一。 点位解算是通过RINEX 2.11格式的观测数据，使用伪距数据来计算接收机的三维位置坐标。一般来说，至少需要四颗卫星的伪距观测值才能进行点位解算。该方法通过解算卫星与接收机之间的距离和接收机的接收时间差，并使用卫星星历数据和卫星位置计算或精确计算来得出接收机的位置。 RINEX 2.11版本的GPS伪距点位解算具有较高的精度和可靠性，广泛用于大地测量、航空航天、导航定位等领域。它提供了采集和处理GPS观测数据的一种标准格式，便于不同厂家的设备进行数据交换和共享，为相关领域的研究和应用提供了便利。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值