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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/748282.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《适应分布式资源渗透率提高的配电网网元规划方法》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

笔记:《NCT全国青少年编程能力等级测试教程Python语言编程三级》

NCT全国青少年编程能力等级测试教程Python语言编程三级 ISBN:9787302574859 绪论 专题1 序列和元组 考查方向 考点清单 考点1 组合数据类型 序列类型(字符串、列表、元组);集合类型;映射类型。 考点2 元组类型 (一)元组类型…

【QT 5 +Linux下qt软件点击.sh脚本运行+Dconf编辑器+学习他人文章+番外篇:点击脚本运行软件】

【QT 5 Linux下qt软件点击.sh脚本运行Dconf编辑器学习他人文章番外篇&#xff1a;点击脚本运行软件】 1、前言2、实验环境3、自我学习总结-本篇总结1、说明&#xff1a;代替qt的快捷方式2、适用性更广3、了解工具&#xff1a;Dconf编辑器注意事项&#xff1a; 4、参考链接-感谢…

PCM和I2S区别

I2S和PCM接口都是数字音频接口&#xff0c;而所见的蓝牙到cpu以及codec的音频接口都是用PCM接口&#xff0c;是不是两个接口有各自不同的应用呢&#xff1f;先来看下概念。 PCM&#xff08;PCM-clock、PCM-sync、PCM-in、PCM-out&#xff09;脉冲编码调制&#xff0c;模拟语音信…

Python列表详解

文章目录 索引和逆转增删元素和查找元素排序 刷完这60个标准库模块&#xff0c;成为Python骨灰级玩家 索引和逆转 列表几乎是Python中使用频率最高的数据结构了&#xff0c;一般来说&#xff0c;只需用逗号分隔&#xff0c;并用方括号括起来&#xff0c;便是列表。 x [1,2,3…

C++面试100问(八)

C中栈溢出的解决办法有哪些&#xff1f; 1&#xff09;、增加栈内存的数目&#xff1b;如果是不超过栈大小但是分配值小的&#xff0c;就增大分配的大小 2&#xff09;、使用堆内存&#xff1b;具体实现由很多种方法可以直接把数组定义改成指针,然后动态申请内存;也可以把局部变…

C++/CLI使用VS创建 CLR 控制台应用程序

你可以使用“创建新项目”对话框中的“CLR 控制台应用 (.NET Framework)”模板创建已具有基本项目引用和文件的控制台应用项目。 安装 Visual Studio C++ 工作负载时,默认情况下不安装 C++/CLI 支持。 如果没有在“创建新项目”对话框中看到 CLR 项目模板,你可能需要安装 C+…

基础:TCP是什么?

1. TCP 是什么&#xff1f; TCP&#xff08;Transmission Control Protocol 传输控制协议&#xff09; 是一种面向连接的、可靠的、基于字节流的传输层通信协议&#xff0c;由IETF的RFC 793 [1]定义。 TCP旨在适应支持多网络应用的分层协议层次结构。连接到不同但互连的计算机…

集成 Spring Data JPA

文章目录 集成 Spring Data JPA1. 添加依赖2. 配置数据源3. 配置 JPA 属性4. 创建实体类5. 创建仓库接口6. 配置事务管理&#xff08;可选&#xff09;7. 使用仓库8. 处理异常和日志&#xff08;可选&#xff09;9. 自定义仓库方法&#xff08;可选&#xff09;10. 使用 Spring…

如何成为一名优秀的硬件工程师

求知若饥&#xff0c;大智如愚&#xff0c;这是乔布斯说的&#xff0c;很多工程师把这句话作为工程师的最基本的职业素养。 “工程师是科学家&#xff1b;工程师是艺术家&#xff1b;工程师也是思想家。”实际上&#xff0c;工程师是利用自然科学来创造工程的人。工程既是物质…

zabbix配置详解

zabbix-server 主要参数及其作用如下所示&#xff1a; 1、DBHost 数据库主机地址 2、DBName 数据库名称 3、DBUser、DBPassword 数据库用户名和数据库密码 4、DBPort 数据库连接端口 5、AlertScriptPath 告警脚本存放路径 6、CacheSize 缓存大小 7、CacheUpdateFrequency 缓存…

Docker容器化技术(使用Dockerfile制作镜像)

Docker中的镜像分层 Docker 支持通过扩展现有镜像&#xff0c;创建新的镜像。实际上&#xff0c;Docker Hub 中 99% 的镜像都是通过在 base 镜像中安装和配置需要的软件构建出来的。 1、Docker 镜像为什么分层 镜像分层最大的一个好处就是共享资源。 比如说有多个镜像都从相…

智慧城市:提升城市治理能力的关键

目录 一、智慧城市的概念及特点 二、智慧城市在提升城市治理能力中的应用实践 1、智慧交通&#xff1a;提高交通治理效率 2、智慧政务&#xff1a;提升政府服务水平 3、智慧环保&#xff1a;加强环境监测与治理 4、智慧安防&#xff1a;提高城市安全水平 三、智慧城市在…

【PythonCode】力扣Leetcode6~10题Python版

【PythonCode】力扣Leetcode6~10题Python版 前言 力扣Leetcode是一个集学习、刷题、竞赛等功能于一体的编程学习平台&#xff0c;很多计算机相关专业的学生、编程自学者、IT从业者在上面学习和刷题。 在Leetcode上刷题&#xff0c;可以选择各种主流的编程语言&#xff0c;如C、…

【python】【多线程】巧用Python 实现多线程批量将 PDF 文档转换为 Word 格式

2. PDF文件批量转换Word 使用 Python 实现多线程批量将 PDF 文档转换为 Word 格式的示例代码&#xff1a; import os import threading from pdf2docx import Converterclass PdfToWordThread(threading.Thread):def __init__(self, pdf_file, output_dir):threading.Thread._…

我的尝试:Codigger + Vim

若您愿意耐心投入&#xff0c;学习 Vim 的过程其实远比想象中轻松。我对 Vim 产生兴趣&#xff0c;主要是源于它对提升生产力的巨大潜力。我尝试了 Neovim、NvChad 以及 Codigger Vim 插件&#xff0c;如今我的工作效率已远超从前。 那么&#xff0c;Vim 究竟是什么呢&#xff…

【调参】如何为神经网络选择最合适的学习率lr-LRFinder-for-Keras

【调参】如何为神经网络选择最合适的学习率lr-LRFinder-for-Keras_学习率选择-CSDN博客文章浏览阅读9.2k次&#xff0c;点赞6次&#xff0c;收藏55次。keras 版本的LRFinder&#xff0c;借鉴 fast.ai Deep Learning course。前言学习率lr在神经网络中是最难调的全局参数&#x…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Navigator)

路由容器组件&#xff0c;提供路由跳转能力。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含子组件。 接口 Navigator(value?: {target: string, type?: NavigationType}) …

最新2024年项目基金撰写与技巧及GPT融合应用

随着社会经济发展和科技进步&#xff0c;基金项目对创新性的要求越来越高。申请人需要提出独特且有前瞻性的研究问题&#xff0c;具备突破性的科学思路和方法。因此&#xff0c;基金项目申请往往需要进行跨学科的技术融合。申请人需要与不同领域结合&#xff0c;形成多学科交叉…

包冲突解决之-invalid constant type: 18

背景 现象一&#xff1a;引入了一个包A&#xff0c;服务突然起不来了&#xff0c;后台有报错信息&#xff0c;Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type xxx available: expected at least 1 bean which quali…