开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用画布绘制多个多边形，但无法使多边形的颜色有所不同

要实现使用画布绘制多个多边形，并使多边形的颜色有所不同，可以通过以下步骤来实现：

创建一个画布：使用HTML5的Canvas元素创建一个画布，并设置画布的宽度和高度。
获取画布上下文：使用JavaScript的getContext方法获取画布的上下文，可以是2D或WebGL上下文。
绘制多个多边形：使用上下文的绘制方法，例如beginPath、moveTo、lineTo和closePath等，来绘制多个多边形。可以通过循环来绘制多个多边形，每个多边形的顶点坐标和颜色可以通过数组来存储。
设置多边形的颜色：在绘制每个多边形之前，使用上下文的fillStyle属性设置多边形的填充颜色。可以使用CSS颜色值，例如十六进制、RGB或RGBA值。

以下是一个示例代码，演示如何使用画布绘制多个多边形并使它们的颜色有所不同：

<!DOCTYPE html>
<html>
<head>
    <title>绘制多个多边形</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        var polygons = [
            { vertices: [[50, 50], [150, 50], [100, 150]], color: "#ff0000" },
            { vertices: [[200, 50], [300, 50], [250, 150]], color: "#00ff00" },
            { vertices: [[100, 200], [200, 200], [150, 300]], color: "#0000ff" }
        ];

        for (var i = 0; i < polygons.length; i++) {
            var polygon = polygons[i];

            ctx.beginPath();
            ctx.moveTo(polygon.vertices[0][0], polygon.vertices[0][1]);

            for (var j = 1; j < polygon.vertices.length; j++) {
                ctx.lineTo(polygon.vertices[j][0], polygon.vertices[j][1]);
            }

            ctx.closePath();
            ctx.fillStyle = polygon.color;
            ctx.fill();
        }
    </script>
</body>
</html>

在上述示例代码中，我们创建了一个大小为400x400像素的画布，并定义了三个多边形，每个多边形由一组顶点坐标和颜色组成。通过循环遍历多边形数组，使用上下文的绘制方法绘制多边形，并设置每个多边形的填充颜色。

请注意，上述示例代码中没有提及任何特定的云计算品牌商或产品。如果需要与云计算相关的功能，可以考虑使用腾讯云的云服务器、云函数、云存储等产品来实现相应的功能。具体产品和介绍可以参考腾讯云官方网站。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

一个有趣的例子带你入门canvas

要绘制一个多边形，多边形图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

01

一文 get 入门 canvas 的最佳路径

要绘制一个多边形，多边形图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

06

【STM32F429】第13章 ThreadX GUIX窗口任意位置绘制2D图形

最新教程下载：http://www.armbbs.cn/forum.php?mod=viewthread&tid=98429 第13章 ThreadX GUIX窗口任意位置绘制2D图形本

02

【STM32H7】第13章 ThreadX GUIX窗口任意位置绘制2D图形

最新教程下载：http://www.armbbs.cn/forum.php?mod=viewthread&tid=98429 第13章 ThreadX GUIX窗口任意位置绘制2D图形本

05

Fireworks8怎么绘制五行相生相克的矢量图?

五行是华夏民族创造的哲学思想。五行学说是华夏文明重要组成部分。古代先民认为，天下万物皆由五类元素组成，分别是金、木、水、火、土，彼此之间存在相生相克的关系，想要画一个五行相生相克的图，该怎么绘制呢？下面我们就来看看详细的教程。

05

眨个眼就学会了Pixi.js

当今的Web开发中，图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎，已经成为了许多开发者的首选（我吹的）。本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们**快速光速入门**，掌握 Pixi.js 的用法。

01

技巧 | OpenCV中如何绘制与填充多边形

很多人都问过我这个问题，OpenCV中是怎么绘制与填充多边形的，特别是填充多边形的。因为根据OpenCV中的多边形绘制函数，他们发现这是一个无解的问题。其实我在2017底做一个项目的时候当时会对得到的一个多边形边缘轮廓进行填充，我就发现OpenCV中的多边形绘制函数无法填充，但是其实换个函数就会顺利搞定，只是大家被OpenCV官方的教程误导思维定势，没有想到而已。下面我们就来详细说一下，OpenCV中的多边形绘制与填充问题。

02

android使用Path绘制出多边形

在讲使用path绘制多边形时,讲下Canvas的translate(),rotate()方法的使用,本博客中会使用这方面的知识,先单独讲下,搞懂了这个,下面讲path绘制多边形就简单的多,我们知道每次我们使用canvas.draw…()绘制什么图形的时候,都是创建了一个新的图层,如果不知道图层是啥意思,就去看下我之前写的关于canvas基础,有讲这方面的,其实你可以理解成每次新创建了一个activity,然后把这个activity压入栈中,translate()是画布平移,其实每次画布还是同一个画布,通过paint绘制的图形都是在这同一个canvas上,但是绘制的内容跟你是否使用了translate()有关系,下面通过简单的demo来演示下：

02

HTML5-Canvas之矩阵和多边形的绘制（2）

上篇文章我们了解了canvas的定义、获取和基础的绘图操作，其中的绘图功能我们讲解了线段绘制、上色、描边等方面知识点。今天我们来讲讲矩形（Rectangle）和多边形的绘制。矩形的绘制一共有两个口令，分别是 ctx.fillRect(x, y, width, height) 和 ctx.strokeRect(x, y, width, height) ，参数中的 x 和 y 依旧表示需绘制的矩形的起始点坐标（相对canvas原点），width 和 height表示需绘制的矩形宽高。而 fillRec

02

「中秋来袭」没想到，用OpenCV竟能画出这么漂亮的月饼「附源码」

中秋佳节即将来临，作为传统的中国节日之一，人们除了品尝美味的月饼、赏月外，还喜欢通过绘画来表达对这个节日的喜悦和祝福。而如今，随着科技的不断发展，竟然可以借助计算机视觉库OpenCV来绘制精美的月饼和可爱的玉兔图像，真是令人大开眼界。

04

Python绘图Turtle库详解[通俗易懂]

画布就是turtle为我们展开用于绘图区域，我们可以设置它的大小和初始位置。

03

【CV 向】OpenCV 图形绘制指南

Python OpenCV 是一个功能强大的计算机视觉库，除了图像处理和计算机视觉任务外，它还提供了丰富的功能来绘制各种图形。无论是在计算机视觉应用中标记感兴趣区域，还是在图像上绘制几何形状或文本，OpenCV 都为我们提供了简单易用的方法。本文将介绍如何利用 Python OpenCV 进行图形绘制。

04

Python 海龟绘图：turtle库的使用

✅作者简介：人工智能专业本科在读，喜欢计算机与编程，写博客记录自己的学习历程。 🍎个人主页：小嗷犬的博客 🍊个人信条：为天地立心，为生民立命，为往圣继绝学，为万世开太平。 🥭本文内容：Python 海龟绘图：turtle库的使用 ---- Python 海龟绘图：turtle库的使用 1.turtle简介 2.turtle基础知识 2.1 画布 2.2 画笔 2.2.1 画笔的状态 2.2.2 画笔的属性 2.2.3 绘图命令 2.2.3.1 画笔运动命令 2.2.3.2 画笔控制命令 2.2

03

Python学习总结（1）—turtle海龟作图

forward(distance) 前进 backward(distance) 后退 right(degree)右转默认为角度 left(degree) 左转默认为角度 goto(newX,newY) | setpos(newX,newY) | setposition(newX,newY) 前往/定位不设置penup()时，会产生画迹 setx(newX) 设置x坐标相当于goto(newX,formerY),不设置penup()时，会产生画迹 sety() 设置y坐标相当于goto(newX,formerY),不设置penup()时，会产生画迹 setheading(to_angel) 设置朝向 0-东；90-北；180-西；270-南相当于left(degree)，因为海龟默认初始指向东 home() 返回原点并改海龟朝向为初始朝向相当于goto(0,0) 和setheading(0）的合作用，不设置penup()时，会产生画迹 circle(radius, extent=None, steps=None) 画圆周/正多边形 radius是半径,也就是圆心位于海龟的左边，距离海龟radius【注意海龟朝向】 extent是所绘制圆周的圆心角大小，单位为°，缺省为360° steps：用来画正多边形，缺省会拟合为圆 dot(size=None, *color) 画点在海龟所处位置画点 size是点的大小，为整型；缺省为默认值 *color是点的颜色的英文单词，为字符串类型 stamp() 印章在海龟当前位置绘制一个海龟形状【需要提前设置海龟形状，缺省为箭头形状】，并返回该印章的id【需要print(t.stamp())或及时赋值给其他变量stamp_id=t.stamp()】 clearstamp(stamp_id) 清除印章参数必须是stamp()函数返回 clearstamps(n) 清除多个印章 n缺省为清除全部印章 n为正数是清除前几个印章 n为负数是清除后几个印章【前后次序以印章出现顺序为准】 undo() 撤消没有参数。撤消 (或连续撤消) 最近的一个 (或多个) 海龟动作。可撤消的次数由撤消缓冲区的大小决定。 speed(Vnum) 速度 Vnum取值为0-10。1-10速度逐渐加快；0为最快【此时没有转向的动画效果，前后移动变为跳跃】或Vnum取为”fastest”对应0,”fast”对应10,”normal”对应6,”slow”对应3,slowest”对应1

01

烧脑！JS+Canvas 带你体验「偶消奇不消」的智商挑战

看似简单却具有极大的挑战性和趣味性，这就是其魅力所在！温馨提示，体验后再阅读此文体验更佳哦！

03

软件测试|超好用超简单的Python GUI库——tkinter（十五）

上一篇文章我们介绍了tkinter的Canvas画布控件，并且使用画布控件绘制了线条，本篇文章我们将介绍使用Canvas绘制更多图形。

01

Python海龟绘图，绘出最靓丽的景色

大家平时用程序画图的时候是不是都觉得比较棘手了，今天给大家介绍个神奇的画图模块-----turtle。它可以通过一些指令让画笔任意移动，可以说是很智能了。

03

手把手教你基于Python实现简单绘图

turtle库是Python语言中自带的一个用于绘制图像的函数库。turtle库为使用者提供一个或多个小乌龟作为画笔，使用者可通过turtle库提供的各种方法去控制小乌龟在一个平面直角坐标系中移动并绘制移动轨迹以画出想要的图案

01

3D 可视化入门：渲染管线原理与实践

玩 3D 游戏的时候，有没有想过这些 3D 物体是怎么渲染出来的？其中的动画是怎么做的？为什么会出现穿模、阴影不对、镜子照不出主角的情况？要想解答这些问题，就要了解实时渲染。其中最基础的，就是渲染管线。

02

python ImageDraw类实现几何图形的绘制与文字的绘制

python PIL图像处理模块中的ImageDraw类支持各种几何图形的绘制和文本的绘制，如直线、椭圆、弧、弦、多边形以及文字等。

03

图形编辑器基于Paper.js教程08：鼠标画封闭的自由多边形，靠近起点自动关闭

在这篇技术博客中，我们将深入探讨如何使用 Paper.js 实现一个基本的图形绘制应用，允许用户在画布上绘制封闭的多边形。Paper.js 是一个强大的向量图形脚本库，它简化了在网页上进行图形和交互式界面设计的过程。本文主要围绕上述代码进行解析，揭示其实现逻辑和关键技术点。

01

使用html5 canvas绘制自定义多边形动态能力分布图

于是自己尝试了一下，用canvas看能否动态绘制能力分布图，以下是我的思路，有不足之处还望老司机们多多指教；

02

软件测试|超好用超简单的Python GUI库——tkinter（十四）

我们知道我们可以使用pillow绘制不同形状的图形，但是我们能不能使用tkinter实现这个功能呢，当然可以，tkinter也可以实现图形的绘制，并且可以将绘制的图形添加到我们的GUI中。

01

python之turtle海龟绘图篇[通俗易懂]

python2.6版本中后引入的一个简单的绘图工具，叫做海龟绘图(Turtle Graphics),出现在1966年的Logo计算机语言。海龟绘图（turtle库）是python的内部模块,使用前导入即可 import turtle 海龟有3个关键属性：方向、位置和画笔（笔的属性有色彩、宽度和开/关状态）

01

带你实现一个简单的多边形编辑器

多边形编辑器少数见于一些图片标注需求，常见于地图应用，用来绘制区域，比如高德地图：

04

【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )

① 组件背景 : 每个组件每设置一次背景 , 该组件的区域就会增加一层绘制 , 如 LinearLayout 线性布局设置背景颜色 , TextView 设置背景颜色 , 都会增加该组件区域内的过渡绘制 ;

03

Python如何使用turtle库绘制图形

在用turtle绘制图形时，需要安装对应python的解释器以及IDE，我安装的是pycharm，在安装完pycharm后，在pycharm安装相应库的模块，绘图可以引入turtle模块，想要进行运算可以引入numpy模块。

01

硬核万字长文：我是如何把Skia的体积“缩小”到1/8的？

作者 | 陈国栋随着移动互联网的一路高歌，越来越多的 App 不满足系统原生的 UI 体系。开启了各种花式的玩法。早几年 ReactNative、Weex 等，企图尝试让系统组件可以像浏览器一样动态加载，从而提高发版本的效率。更早几年还有一众通过在系统 Webview 基础上面搭建起来的动态化方案，包括当下诸多的小程序平台等。Flutter 的发布仿佛给业界带来一丝新的生机，通过 Skia 渲染器完美的保证了在诸多平台渲染的一致性。但也带来专属于 Flutter 本身的一些问题。不过多的讨论关于 Flut

01

使用python的turtle函数绘制一个滑稽表情

Turtle库是Python语言中一个很流行的绘制图像的函数库，想象一个小乌龟，在一个横轴为x、纵轴为y的坐标系原点，(0,0)位置开始，它根据一组函数指令的控制，在这个平面坐标系中移动，从而在它爬行的路径上绘制了图形。

01

关于Adobe Photoshop选择并遮住工作区，用户界面介绍

快速选择工具：当您单击或单击并拖动要选择的区域时，会根据颜色和纹理相似性进行快速选择。您所做的选择不需要很精确，因为快速选择工具会自动且直观地创建边框。

03

Java-GUI编程之绘图

很多程序如各种小游戏都需要在窗口中绘制各种图形，除此之外，即使在开发JavaEE项目时，有时候也必须"动态"地向客户端生成各种图形、图表，比如图形验证码、统计图等，这都需要利用AWT的绘图功能。

00

Python绘制雷达图

雷达图也被称为网络图，蜘蛛图，星图，蜘蛛网图，是一个不规则的多边形。雷达图可以形象地展示相同事物的多维指标，应用场景非常多。

01

Python matplotlib绘制雷达图

雷达图也被称为网络图，蜘蛛图，星图，蜘蛛网图，是一个不规则的多边形。雷达图可以形象地展示相同事物的多维指标，应用场景非常多。

03

【愚公系列】2023年11月 WPF控件专题 Polygon控件详解

WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。

01

ArcMap实现栅格遥感影像监督分类

在文章ENVI最小距离、最大似然、支持向量机遥感影像分类中，我们介绍了基于ENVI软件实现遥感影像监督分类的具体操作方法；本文则介绍基于ArcMap软件实现同样的遥感影像监督分类的方法。

02

UE4/Unity绘制地图基础元素-面和体

面作为地图渲染的基本元素之一，在地图中可以代表各种形式的区域，例如海面、绿地等。面数据通常以离散点串形式存储，因此渲染时最关注的是如何将其展现为闭合的图形。

05

如何使用程序来绘制图形？

本系列课程是针对无基础的，争取用简单明了的语言来讲解，学习前需要具备基本的电脑操作能力，准备一个已安装python环境的电脑。如果觉得好可以分享转发，有问题的地方也欢迎指出，在此先行谢过。

02

【OpenGL】十八、OpenGL 绘制多边形 ( 绘制 GL_POLYGON 模式多边形 )

使用 glBegin(GL_POLYGON) 设置绘制多边形 , 不管有几个点 , 都按照指定的顺序连接起来 ;

00

PHP图形图像处理

当图像处理完成后，可以使用imagedestroy()函数销毁图像资源来释放内存。

02

【Python实用工具】（情人节献礼）turtle函数绘制动态玫瑰花

turtle.setup(width=0.5, height=0.75, startx=None, starty=None)，参数：width, height: 输入宽和高为整数时, 表示像素; 为小数时, 表示占据电脑屏幕的比例，(startx, starty): 这一坐标表示矩形窗口左上角顶点的位置, 如果为空,则窗口位于屏幕中心。如：turtle.setup(width=0.6,height=0.6)

03

Qt编写自定义控件7-自定义可拖动多边形

自定义可拖动多边形控件，原创作者是赵彦博(QQ:408815041 zyb920@hotmail.com)，创作之初主要是为了能够在视频区域内用户自定义可拖动的多个区域，即可用来作为警戒区域，也可用来其他的处理，拿到对应的多边形坐标集合，本控件的主要难点是如何计算一个点在一个多边形区域内，何时完成一个多边形区域，支持多个多边形。

04

用OpenGL绘制平滑着色的三角形与相交区域的混合着色

一、三角形的绘制在OpenGL中，面是由多边形构成的。三角形可能是最简单的多边形，它有三条边。可以使用GL_TRIANGLES模式通过把三个顶点连接到一起而绘出三角形。使用GL_TRIANGLE_STRIP模式可以绘制几个相连的三角形，系统根据前三个顶点绘制第一个多边形，以后每指定一个顶点，就与构成上一个三角形的后两个顶点绘制形的一个三角形。使用GL_TRIANGLE_FAN模式可以绘制一组相连的三角形，这些三角形绕着一个中心点成扇形排列。第一个顶点构成扇形的中心，用前三个顶点绘制会最初的三角形后，

关于使用ZBrush，你可能不知道的10个技巧

作为数字雕刻的行业标准，ZBrush的工具集非常灵活，以至于能够让用户选择最适合他们自己的工作流，人们会因为它的众多可用选项而选择经常使用它，程序里的旧功能也许很适合某些特定情景。给大家介绍有关ZBrush的10个操作技巧，你可能了解也可能不了解，主要针对初学者和中级用户—也可能会有一些奇特的事项对经验丰富的用户有用，这取决于你们选择的工作流。 1、在PaintStop中素描想法

02

【Java AWT 图形界面编程】Canvas 组件中使用 Graphics 绘图 ② ( AWT 绘图步骤 | Graphics 绘图常用 API )

在 AWT 绘图中 , Canvas 是绘图所在的画布 , Graphics 是绘图使用的画笔 ;

01

【专业技术】OpenGL操作技巧介绍

存在问题： opengl中如何渲染管线？解决方案：绝大数OpenGL实现都有相似的操作顺序，一系列相关的处理阶段称为OpenGL渲染管线。图1-2显示了这些顺序，虽然并没有严格规定OpenGL必须

02

OpenCV - 绘图

只有当直线完全在指定的矩形范围之外时，函数cv2.clipLine() 才会返回False

02

【MATLAB】进阶绘图 ( fill 填充二维多边形 | fill 函数 | 绘制文字 | text 函数 )

fill 函数参考文档 : https://ww2.mathworks.cn/help/matlab/ref/fill.html

03

【从零学习OpenCV 4】绘制几何图形

经过几个月的努力，小白终于完成了市面上第一本OpenCV 4入门书籍《从零学习OpenCV 4》。为了更让小伙伴更早的了解最新版的OpenCV 4，小白与出版社沟通，提前在公众号上连载部分内容，请持续关注小白。

03

iOS开发——Core Graphics绘图

我们在搭建UI界面时，有很多时候，我们会用到iOS自带的绘图功能来完成一些界面的效果，很常用也很方便。今天我们在这里就一起讨论一下iOS的绘图功能。

02

带你了解SVG标签

✍️ 作者简介: 前端新手学习中。 💂 作者主页: 在主页中查看更多前端教学，可接大学生前端作业单。 🎓 专栏分享：css重难点教学 Node.js教学从头开始学习 ajax学习 js学习目录初始SVG 矩形，圆形和椭圆型矩形圆形椭圆形绘制线条多边形连续线条线条多边形连续线条绘制文本绘制路径阴影和模糊初始SVG SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Ext

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭