js实现扫描线填色算法使用canvas展示
算法原理
扫描线填色算法的基本思想是：用水平扫描线从上到下扫描由点线段构成的多段构成的多边形。每根扫描线与多边形各边产生一系列交点。将这些交点按照x坐标进行分类，将分类后的交点成对取出，作为两个端点，以所填的色彩画水平直线。多边形被扫描完毕后，填色也就完成。
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scanline Seed Fill Algorithm</title>
<style>canvas {border: 1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<br/>
<canvas id="canvasFill" width="400" height="400"></canvas>
<script>// Define the pathconst path = [{ x: 100, y: 100 },{ x: 300, y: 100 },{ x: 200, y: 200 },{x:200,y:300}];// Function to sort points by x-coordinatefunction sortByX(a, b) {return a.x - b.x;}// Function to find minimum and maximum y-coordinate in a list of pointsfunction findMinMaxY(points) {let minY = points[0].y;let maxY = points[0].y;for (let i = 1; i < points.length; i++) {minY = Math.min(minY, points[i].y);maxY = Math.max(maxY, points[i].y);}return { minY, maxY };}// Scanline seed fill algorithmfunction seedFill(canvas, path, fillColor) {const ctx = canvas.getContext('2d');const { minY, maxY } = findMinMaxY(path);const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);const imageDataArray = imageData.data;for (let y = minY; y <= maxY; y++) {const intersections = [];for (let i = 0; i < path.length; i++) {const p1 = path[i];const p2 = path[(i + 1) % path.length];if ((p1.y <= y && p2.y >= y) || (p2.y <= y && p1.y >= y)) {const x = Math.round(p1.x + (y - p1.y) * (p2.x - p1.x) / (p2.y - p1.y));intersections.push(x);}}intersections.sort((a, b) => a - b);for (let i = 0; i < intersections.length; i += 2) {const x1 = intersections[i];const x2 = intersections[i + 1];for (let x = x1; x <= x2; x++) {const index = (y * canvas.width + x) * 4;imageDataArray[index] = fillColor.r;imageDataArray[index + 1] = fillColor.g;imageDataArray[index + 2] = fillColor.b;imageDataArray[index + 3] = fillColor.a;}}}const canvasFill = document.getElementById('canvasFill');const ctxFill = canvasFill.getContext('2d');ctxFill.putImageData(imageData, 0, 0);}// Draw the pathfunction drawPath(canvas, path) {const ctx = canvas.getContext('2d');ctx.beginPath();ctx.moveTo(path[0].x, path[0].y);for (let i = 1; i < path.length; i++) {ctx.lineTo(path[i].x, path[i].y);}ctx.closePath();ctx.stroke();}// Fill the pathfunction fillPath(canvas, path) {const ctx = canvas.getContext('2d');const fillColor = { r: 255, g: 0, b: 0, a: 255 }; // Red color// Draw the pathdrawPath(canvas, path);// Seed fill the pathseedFill(canvas, path, fillColor);}// Fill the path on canvas loadconst canvas = document.getElementById('canvas');fillPath(canvas, path);
</script>
</body>
</html>相关文章：
js实现扫描线填色算法使用canvas展示
算法原理 扫描线填色算法的基本思想是：用水平扫描线从上到下扫描由点线段构成的多段构成的多边形。每根扫描线与多边形各边产生一系列交点。将这些交点按照x坐标进行分类，将分类后的交点成对取出，作为两个端点，以所填的色彩画水平…...
考研模拟面试-题目【攻略】
考研模拟面试-题目【攻略】 前言版权推荐考研模拟面试-题目前面的问题通用问题专业题数据结构计算机网络操作系统数据库网络安全 手写题数据结构操作系统计算机网络 代码题基础代码题其他代码题 后面的问题补充题目 最后 前言 2023-10-19 12:00:57 以下内容源自《考研模拟面试…...
Frostmourne - Elasticsearch源日志告警配置
简介 配置Frostmourne 接入Elasticsearch源进行日志匹配告警，并静默规则，告警消息发送到企业微信，告警信息使用Markdown。 部署安装教程查看： https://songxwn.com/frostmourne_install ELK 安装教程：https://songx…...
GPT出现Too many requests in 1 hour. Try again later.
换节点 这个就不用多说了，你都可以上GPT帐号了，哈…… 清除cooki 然后退出账号，重新登录即可...
python爬虫实战——小红书
目录 1、博主页面分析 2、在控制台预先获取所有作品页的URL 3、在 Python 中读入该文件并做准备工作 4、处理图文类型作品 5、处理视频类型作品 6、异常访问而被中断的现象 7、完整参考代码 任务：在 win 环境下，利用 Python、webdriver、JavaS…...
Linux信号机制
目录 一、信号的概念 二、定时器 1. alarm函数 2. setitimer函数 3.signal和sigaction函数 三、使用SIGCHLD信号实现回收子进程 一、信号的概念 概念：信号是在软件层次上对中断机制的一种模拟，是一种异步通信方式 。所有信号的产生及处理全部都是由内…...
区块链技术中的共识机制算法：以权益证明（PoS）为例
引言： 在区块链技术的演进过程中，共识机制算法扮演着至关重要的角色。除了广为人知的工作量证明（PoW）外，权益证明（Proof of Stake，PoS）也是近年来备受关注的一种共识算法。 …...
19113133262（微信同号）【征稿进行时|见刊、检索快速稳定】2024年区块链、物联网与复合材料与国际学术会议 (ICBITC 2024)
【征稿进行时|见刊、检索快速稳定】2024年区块链、物联网与复合材料与国际学术会议 (ICBITC 2024) 大会主题: (主题包括但不限于, 更多主题请咨询会务组苏老师) 区块链： 区块链技术和系统 分布式一致性算法和协议 块链性能 信息储存系统 区块链可扩展性 区块…...
Doris：使用表函数explode实现array字段列转行
文章目录 使用场景相关知识点介绍explodesplit_by_stringlateral view 具体实现和SQLlateral view explode列转行SPLIT_BY_STRING拆分字符串为数组element_at获取数据创建视图 使用场景 我们的大数据数据库，由clickhouse换成了doris我们有一张路口指标表࿰…...
原生php单元测试示例
下载phpunit.phar https://phpunit.de/getting-started/phpunit-9.html 官网 然后win点击这里下载 新建目录 这里目录可以作为参考，然后放在根目录下 新建一个示例类 <?phpdeclare(strict_types1);namespace Hjj\DesignPatterns\Creational\Hello;class He…...
计算机毕业设计-springboot+vue前后端分离电竞社交平台管理系统部分成果分享
4.5系统结构设计 本系统使用的角色主要有系统管理员、顾客、接单员，本系统为后台管理系统，游客用户可以经过账号注册，管理员审核通过后，用账号密码登录系统，查看后台首页，模块管理（顾客信息&am…...
Stable Diffusion 详解
整体目标 文本生成图片；文本图片生成图片 网络结构 CLIP的文本编码器和图片生成器组成图像生成器，输入是噪声经过UNet得到图像特征，最后解码得到图像 前向扩散 模型直接预测图片难度比较大，所有让模型预测噪音然后输入-噪音…...
Go函数全景：从基础到高阶的深度探索
目录 一、Go函数基础1.1 函数定义和声明基础函数结构返回值类型和命名返回值 1.2 参数传递方式值传递引用传递 二、Go特殊函数类型2.1 变参函数定义和使用变参变参的限制 2.2 匿名函数与Lambda表达式何为匿名函数Lambda表达式的使用场景 2.3 延迟调用函数（defer&…...
探秘Nutch：揭秘开源搜索引擎的工作原理与无限应用可能（一）
本系列文章简介： 本系列文章将带领大家深入探索Nutch的世界，从其基本概念和架构开始，逐步深入到爬虫、索引和查询等关键环节。通过了解Nutch的工作原理，大家将能够更好地理解搜索引擎背后的原理，并有能力利用Nutch构建…...
MySQL 数据库 下载地址 国内阿里云站点
mysql安装包下载_开源镜像站-阿里云 以 MySQL 5.7 为例 mysql-MySQL-5.7安装包下载_开源镜像站-阿里云...
)
【25届秋招备战C++】算法篇-贪心算法(Greedy)
【25届秋招备战C】算法篇-贪心算法 一、简介二、解题思路三、应用场景四、模板函数五、参考 一、简介 一种在每次决策时，总是采取在当前状态下的最好选择，从而希望导致结果是最好或最优的算法。通常用于解决一些最优化问题，如找零问题、霍夫…...
scrcpy远程投屏控制Android
下载 下载后解压压缩包scrcpy-win64-v2.4.zip scrcpy连接手机 1. 有线连接 - 手机开启开发者选项，并开启USB调试，连接电脑，华为手机示例解压scrcpy，在scrcpy目录下打开终端，（或添加scrcpy路径为环境变…...
找机厅 洛谷 BFS
P10234 [yLCPC2024] B. 找机厅 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> #define pii pair<int,int> #define fr first #define sc second using namespace std; string maze[2000]; int vis[2000][2000]; char dirs[2005][2005]; st…...
软件无线电系列——模拟无线电、数字无线电、软件无线电
本节目录 一、模拟无线电 二、数字无线电 1、窄带数字无线电 2、宽带数字无线电 三、软件无线电本节内容 一、模拟无线电 20世纪80年代的模拟体制(美国的AMPS/欧洲的TACS)被称为第一代移动通信，简称1G,主要目标是为在大范围内有限的用户提供移动电话服务。最主要的…...
XSS_lab(level11-level18)
level11: 还是url这里,输入:<script>alert(1)</script> 与上一题相似 构建:?t_link1&t_history2&t_sort3&t_ref4 我们发现t_sort是可用的 构建:?t_sort1" type"button" οnclickalert(1) // 把双引号过滤了 这里无法使用实体编码…...
从ThreadLocal到TransmittableThreadLocal：手把手解决线程池上下文传递难题
从ThreadLocal到TransmittableThreadLocal：线程池上下文传递的终极解决方案 在分布式系统和微服务架构盛行的今天，异步编程已成为Java开发者日常工作中不可或缺的一部分。无论是处理高并发请求、优化系统性能，还是实现复杂的业务流程…...
ssm+java2026年毕设蔬果批发网络平台【源码+论文】
本系统（程序源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容一、选题背景关于农产品电商交易模式的研究，现有研究主要以综合电商平台（如淘宝、京东）的农产品销售模式…...
手把手教你学Simulink——基于Simulink的模型预测控制（MPC）PFC整流器快速动态响应
目录 手把手教你学Simulink ——基于Simulink的模型预测控制（MPC）PFC整流器快速动态响应 一、问题背景 二、系统建模与控制目标 1. 单相 Boost PFC 拓扑 2. 动态方程（αβ 静止坐标系） 3. 控制目标 三、有限控制集 MPC（FCS-MPC）设计 1. 预测模型（离散化） 2. 代…...
LFM2.5-1.2B-Thinking-GGUF开源生态初探：与Ollama等工具的对比与集成
LFM2.5-1.2B-Thinking-GGUF开源生态初探：与Ollama等工具的对比与集成 1. 开源大模型本地部署生态概览 近年来，开源大模型本地部署工具呈现百花齐放的局面。从早期的单一模型加载器，发展到如今功能丰富的模型管理生态系统，开发者…...
从CFG到PDG：5个真实案例解析程序依赖图在安全审计中的应用
从CFG到PDG：5个真实案例解析程序依赖图在安全审计中的应用 在软件安全领域，漏洞检测的精准度往往取决于代码分析的深度。传统控制流图（CFG）虽然能描绘执行路径，却难以捕捉数据流转的潜在风险。程序依赖图（P…...
无噪音RS1 ROSAHL 电解式除湿器 3D 打印耗材盒/户外摄像头/激光器精准除湿设备
RS1 是 ROSAHL（日本 Ryosai Technica 生产）推出的一款超紧凑型电解式除湿器，采用全球领先的固体聚合物电解质（SPE）膜技术，通过电化学原理主动将密闭空间内的水分子分解并以气态形式排出。它具备无噪音、无振…...
Qwen2-VL-2B-Instruct一键部署教程：基于Ubuntu 20.04的GPU环境快速搭建
Qwen2-VL-2B-Instruct一键部署教程：基于Ubuntu 20.04的GPU环境快速搭建 你是不是也遇到过这种情况？看到一个很酷的多模态大模型，想立刻上手试试，结果被复杂的依赖安装、环境配置、驱动适配搞得头大，折腾半天还没跑起来…...
OCRmyPDF技术解构：3大创新点与制造业/法律服务效能优化实践
OCRmyPDF技术解构：3大创新点与制造业/法律服务效能优化实践 【免费下载链接】OCRmyPDF OCRmyPDF adds an OCR text layer to scanned PDF files, allowing them to be searched 项目地址: https://gitcode.com/GitHub_Trending/oc/OCRmyPDF 一、技术内核&…...
Graphormer图神经网络效果展示：含手性中心/立体异构体分子的预测能力验证
Graphormer图神经网络效果展示：含手性中心/立体异构体分子的预测能力验证 1. 模型概述 Graphormer是一种基于纯Transformer架构的图神经网络，专门为分子图（原子-键结构）的全局结构建模与属性预测而设计。该模型在OGB（…...
仿真：H无穷鲁棒控制与for loop shaping在永磁同步电机伺服位置控制中的应用 - ...
仿真-H无穷鲁棒控制_for loop shaping-永磁同步电机伺服位置控制仿真:验证设计流程，送鲁棒控制设计资料包永磁同步电机的伺服位置控制总让人又爱又恨。这玩意儿响应快、精度高，但参数敏感得像刚恋爱的小姑娘。传统PID搞不定的时候，试试H无穷鲁…...