开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

创建一个画布：使用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像素的画布，并定义了三个多边形，每个多边形由一组顶点坐标和颜色组成。通过循环遍历多边形数组，使用上下文的绘制方法绘制多边形，并设置每个多边形的填充颜色。

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

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

有帮助

没帮助

相关·内容

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

13.3.1 了解2D绘制函数 GUIX的2D效果绘制主要是通过canvas相关的几个函数实现：这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路.../* 设置笔刷填充的颜色值 */ gx_context_raw_fill_color_set(0xff00ff00); /* 通过GX_BRUSH_SOLID_FILL使能圆圈，...gx_context_raw_line_color_set 设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。...注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下： gx_context_raw_fill_color_set 设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值...gx_canvas_polygon_draw 多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。

7812 0

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

13.3.1 了解2D绘制函数 GUIX的2D效果绘制主要是通过canvas相关的几个函数实现：这里提供的这些函数，大家根据官网手册的参数说明和每个例子后的调用实例使用即可，但要注意调用的一些套路.../* 设置笔刷填充的颜色值 */ gx_context_raw_fill_color_set(0xff00ff00); /* 通过GX_BRUSH_SOLID_FILL使能圆圈，...gx_context_raw_line_color_set 设置笔刷画线的颜色值，比如直线，圆圈的轮廓，椭圆的轮廓，矩形的轮廓，多边形的轮廓等都是采用的这个值。...注意这个颜色值是32bit的ARGB格式，每个bit代表的含义如下： gx_context_raw_fill_color_set 设置笔刷填充的颜色值，比如圆圈填充，椭圆填充，矩形填充，多边形填充等都是采用的这个值...gx_canvas_polygon_draw 多边形绘制，坐标含义同上。多边形的绘制是把用户设置的几个坐标点依次连接到一起。

7335 0

眨个眼就学会了Pixi.js

设置填充或描边颜色。创建图形。执行绘制操作。注意：以上几个步骤一定要按顺序做，一定要先设置颜色再创建图形，不然图形就可能没颜色或者使用上下文的颜色。...() // 将绘制好的图形添加到画布中 app.stage.addChild(graphics) 多边形 (drawPolygon) 使用 drawPolygon() 方法可以绘制多边形，该方法接收1...在 Pixi.js 里，使用 drawRegularPolygon() 方法可以绘制正多边形，但前提是**要引入 @pixi/graphics-extras.js**。...(sprite) 使用 PIXI.Texture 方法加载图片纹理，但这个方法前面是不需要 new 的，这点要注意！...，由于篇幅有限，无法一一列举所有的功能。

7.1K1 0

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

上篇文章我们了解了canvas的定义、获取和基础的绘图操作，其中的绘图功能我们讲解了线段绘制、上色、描边等方面知识点。今天我们来讲讲矩形（Rectangle）和多边形的绘制。...而 fillRect 表示绘制一个实心矩形，strokeRect 表示绘制一个描边矩形，我们来一个简单的例子：效果如下 ---- 你也可以使用 Rect( x, y, width, height...我们设置渐变线结束点颜色透明度为0是为了方便查看结束圆的边界。...时，要尽量避免起始圆的范围超出结束圆的范围（起始圆最好是结束圆内部的一个真子集），否则绘制出来的效果会出现无法预知的错误，例如下面的代码：不过如果你掌握了RadialGradient上色原理，倒是可以随意定位起始圆和结束圆的方位和大小...举个例子：注意clearRect不会清除掉之前定义过的样式、画笔位置等绘制信息，打个比方，有时候我们需要清空整个画布，我们可以这样做：这个方法是通过重置画布大小，从而触发清空画布事件，但前面定义的

1.5K2 0

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

其实我在2017底做一个项目的时候当时会对得到的一个多边形边缘轮廓进行填充，我就发现OpenCV中的多边形绘制函数无法填充，但是其实换个函数就会顺利搞定，只是大家被OpenCV官方的教程误导思维定势，没有想到而已...但是对多边形来说，polylines函数把thickness设置为非正数就会直接报错，无法通过修改thickness完成填充，该函数只能实现绘制。...，图像 pts表示多边形的点 isClosed表示是否闭合，默认闭合 color表示颜色 thickness表示线宽，必须是正数 lineType表示线渲染类型 shift表示相对位移绘制一个多边形的代码演示如下...hierarchy = noArray(), int maxLevel = INT_MAX, Point offset = Point() ) 该函数功能比较强大，一次可以完成多个多边形的填充与绘制...只是在输入的时候需要适当改一下。参数controus表示的多个多边形点集合，contourIdx大于零表示绘制指定索引的轮廓，-1表示绘制全部，thickness正数表示绘制，非正数表示填充。

3.6K2 0

一文 get 入门 canvas 的最佳路径

咱们一起来看看这个问题，这个问题问了两个小问题： 1.如何在 canvas 上绘制多边形? 2.鼠标怎么选中绘制的某一个图形？那么咱们就来分为两个问题解答。...绘制多边形要绘制一个多边形，多边形图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。...使用路径绘制图形需要一些额外的步骤。首先，你需要创建路径起始点然后你使用画图命令去画出路径。之后你把路径封闭一旦路径生成，你就能通过描边或填充路径区域来渲染图形。...有没有其他方案了，在游戏界有一个普遍使用的方案——包围盒，什么是包围盒呢？我们以上面的图形举例，外面画的红线框就是这个多边形的包围盒。...如果你想用包围盒的方案来做，那就要分的足够细，比如下图： ? 分出来了多个包围盒，这种情况在图形特别复杂的时候，包围盒这个方案就有点粗糙了。

9206 1

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

绘制多边形要绘制一个多边形，多边形图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。...使用路径绘制图形需要一些额外的步骤。首先，你需要创建路径起始点然后你使用画图命令去画出路径。之后你把路径封闭一旦路径生成，你就能通过描边或填充路径区域来渲染图形。...有没有其他方案了，在游戏界有一个普遍使用的方案——包围盒，什么是包围盒呢？我们以上面的图形举例，外面画的红线框就是这个多边形的包围盒。...如果你想用包围盒的方案来做，那就要分的足够细，比如下图：分出来了多个包围盒，这种情况在图形特别复杂的时候，包围盒这个方案就有点粗糙了。...比如在画布的这些图形：在另一张一模一样的画布上，画了这些图形上层画布（显示出来的）是正常的图形，但是每个图形分配一个 rgb 色值。

9051 0

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

pts：多边形每个顶点的坐标数组。 npts：多边形每个闭合环的顶点数量数组。 ncontours：多边形的数量。 isClosed：是否闭合多边形。 color：多边形的颜色。...pts：多边形每个顶点的坐标数组的指针。 npts：多边形每个闭合环的顶点数量数组。 ncontours：多边形的数量。 color：填充的颜色。...通过使用 cv::polylines 和 cv::fillPoly 函数，可以绘制更复杂的多边形形状和填充效果。...通过指定圆心坐标、半径和颜色来绘制圆形月饼。最后，在窗口中显示绘制的月饼。...通过指定中心点、尺寸、角度和颜色等参数来绘制不同的部分。最后，在窗口中显示绘制的兔子。

3694 0

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

如何绘制任意多边形图片？任意一个多边形图形，是由多个平面坐标点所组成的图形区域。在游戏画布内，我们以左上角为坐标原点 {x: 0, y: 0} ，一个多边形包含多个单位长度的平面坐标点。...那么如何求多个多边形 xor 的结果呢？ polygon-clipping 正是为此而生的。...在微信内 wx.createCanvas() 首次调用创建的是显示在屏幕上的画布，之后调用创建的都是离屏画布。初始化时将静态场景绘制完备，需要时直接拷贝离屏Canvas的图像即可。...，然后不断的清空画布再重新绘制。...可以想象，这个绘制是非常频繁的，按照普通的做法就需要不断去创建多个新的 Block 对象。针对游戏中需要频繁更新的对象，我们可以通过使用对象池的方法进行优化，对象池维护一个装着空闲对象的池子。

1.4K3 0

Python 海龟绘图：turtle库的使用

本文内容：Python 海龟绘图：turtle库的使用 ---- Python 海龟绘图：turtle库的使用 1.turtle简介 2.turtle基础知识 2.1 画布 2.2 画笔 2.2.1...turtle库绘制原理：有一只海龟在窗体正中心，在画布上游走，走过的轨迹形成了绘制的图形，海龟由程序控制，可以自由改变颜色、方向宽度等。...我们可以通过screensize函数来设置画布的大小和背景颜色： turtle.screensize(canvwidth=None, canvheight=None, bg=None) 其中screensize...函数的三个参数分别表示画布的宽、高和背景颜色。...这里我们描述小乌龟时使用了两个词语：坐标原点(位置)，面朝x轴正方向(方向)， turtle绘图中，就是使用位置方向描述小乌龟(画笔)的状态。

2.5K3 0

【CV 向】OpenCV 图形绘制指南

创建画布在开始图形绘制之前，我们首先需要创建一个空白的画布。在 OpenCV 中，我们可以使用 cv2.imread() 函数加载图像，或使用 np.zeros() 创建一个空白的图像作为画布。...然后，我们使用 cv2.imshow() 函数显示画布。 2. 绘制线段绘制线段是图形绘制中的基本操作之一。在 OpenCV 中，我们可以使用 cv2.line() 函数绘制线段。...我们可以通过调整 thickness 参数来设置椭圆的边框粗细。 6. 绘制多边形绘制多边形是绘制复杂形状的常见操作。...cv2.polylines() 函数在画布上绘制了一个由多个顶点构成的青色多边形。...points 是一个包含多个顶点坐标的数组，我们可以根据需要添加更多的顶点。我们可以通过调整 thickness 参数来设置多边形的边框粗细。 7.

6324 0

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

，会在画布对应位置绘制 1 个像素点（由于 1 个像素点很难看到，例子中将画布缩放了 10 倍，因此看起来会比较模糊）。...每点一次鼠标，就在图元数组中添加一个顶点，完成整个渲染的流程后，在画布上绘制出了一个白色的点。那么怎么画线和三角形呢？...它还细分为正投影，即绘制物体三视图的投影，和轴侧投影，能同时看到多个面的投影。...对颜色和法线进行差值，可参考后文多边形着色 4.2 三角形遍历 - triangle traversal 这一部分，通过各种算法，确定这些图元会覆盖哪些像素，并确保没有一个像素被多个三角形覆盖（节省渲染资源...如果 m > 1，会有大量网格无法绘制，交换 xy 即可解决但是这一算法涉及浮点数运算，性能比较差。

6.9K2 1

UE4Unity绘制地图基础元素-面和体

三角剖分的解可能是不唯一的，任何一种剖分方式都能够渲染得到面，但细小的三角形更容易使面中的同一像素绘制多次，造成过度绘制(Overdraw)，因此根据多边形特征做一些剖分次序的调整可以作为一个优化点。...[69be8a6efb4b41398cea6baadd8f7c0c~tplv-k3u1fbpfcp-watermark.image] 剖分完成的多边形区域，在指定了每一个顶点的颜色之后，就能绘制得到纯色的面...通过全链路的排查，才查出是多边形数据的问题。三角剖分在使用时有一个前置条件：使用对象必须为简单多边形，即多边形中的任何两条边仅可以在顶点处相交。...从下图四个顶点构成的非简单多边形的三角剖分结果可以看到，多边形渲染时会丢失顶点并且产生错误的三角形，无法还原数据真实情况。...对于一个非简单多边形，在分解为多个简单多边形后，绘制所有面积不为0的图形就可以了。这种方案可以最大限度还原原始数据，并且规避闪烁问题。

1.3K5 1

Python绘图Turtle库详解

turtle绘图的基础知识： 1. 画布(canvas) 画布就是turtle为我们展开用于绘图区域，我们可以设置它的大小和初始位置。...设置画布大小 turtle.screensize(canvwidth=None, canvheight=None, bg=None)，参数分别为画布的宽(单位像素), 高, 背景颜色。...画笔 2.1 画笔的状态在画布上，默认有一个坐标原点为画布中心的坐标轴，坐标原点上有一只面朝x轴正方向小乌龟。...这里我们描述小乌龟时使用了两个词语：坐标原点(位置)，面朝x轴正方向(方向)， turtle绘图中，就是使用位置方向描述小乌龟(画笔)的状态。...dot(r) 绘制一个指定直径和颜色的圆点 (2) 画笔控制命令命令说明 turtle.fillcolor(colorstring) 绘制图形的填充颜色 turtle.color(color1

1.5K3 0

Python 绘图魔法：用turtle库开启你的编程艺术之旅

可以发现，初始时海龟是咋画布的正中间的，而且海龟的屏幕向右，这点需要记得呢。...2.2 正多边形绘制有了正方形的前车之鉴，多边形的绘制就非常简单了，比较正方形就正四边形。...难道在turtle中绘制圆，只能这样绘制正多边形吗，也不是，下一个图形就圆的绘制了。 2.3 同心圆的绘制绘制同心圆前，圆的绘制还是要知道的。...turtle.done() 2.6 螺旋图案的绘制螺旋图形的绘制，重在螺旋，对于角度要使用不规则的角度，否则就无法形成螺旋了。...blue", "green", "orange", "purple"] for i in range(1000): t.color(colors[i % len(colors)]) # 循环使用颜色

1171 0

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

turtle库为使用者提供一个或多个小乌龟作为画笔，使用者可通过turtle库提供的各种方法去控制小乌龟在一个平面直角坐标系中移动并绘制移动轨迹以画出想要的图案主要角色：海龟（Turtle）：海龟是 Turtle...画布（Canvas）：画布是用于绘制图形的空间，通常是一个二维平面。海龟在画布上移动和绘制图形。控制命令：通过发送控制命令给海龟，可以控制它在画布上的行为。...绘图命令：绘图命令可以让海龟在画布上绘制各种图形，例如直线、圆、多边形等。绘图命令通常和控制命令结合使用，可以创建复杂的图案。...常用的绘图命令包括：t.circle(radius)：绘制一个圆，指定半径t.dot(size)：绘制一个点，指定大小t.polygon(n, side_length)：绘制一个正多边形，指定边数和边长控制海龟速度...圆形装饰品使用红色和黄色交替，方形装饰品使用绿色。树干使用棕色。通过循环和条件语句，乌龟根据不同的行数和位置，绘制不同颜色的装饰品。

3871 0

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

,color) #设置宽度高度颜色二、设置画布坐标我们画图不光要设置画布，还要对画布的容器主界面进行设置，不然主界面显示不了，画布自然也不会显示。...#画布大小背景颜色 turtle.setup(width=600,height=600, startx=300, starty=50) #绘图窗口的大小和起始坐标 turtle.mainloop()...38.设置或返回以毫秒为单位的绘图延迟 turtle.delay(delay=None) 39.开始记录多边形的第一个顶点 turtle.begin_poly() 40.停止记录多边形的最后一个顶点 turtle.end_poly...() 41.返回最后记录的多边形 turtle.get_poly() ?...这里显示了最初绘图的坐标，其实它绘制的是一个矩形。

1.8K3 0

Python绘制雷达图

本篇文章介绍使用matplotlib绘制雷达图。雷达图也被称为网络图，蜘蛛图，星图，蜘蛛网图，是一个不规则的多边形。雷达图可以形象地展示相同事物的多维指标，应用场景非常多。...要让绘制的雷达图封闭，将数据的第一个值连接到数组的结尾即可。本文用折线图plot()来绘制雷达图，使用figure()函数设置好图形的大小和清晰度，然后使用subplot()函数来创建一张子图。...在极坐标系中，极径值相等的点在一个圆上，所以绘制的雷达图中，网格线默认都是圆形的。如果要绘制多边形的雷达图，则需要将圆形的网格线隐藏，然后根据刻度范围绘制出多边形的网格线。...首先使用plot()函数，根据刻度范围，绘制出同心的多个多边形和多个维度方向的极轴，作为雷达图的网格线，形成一张“网”。...而相对于圆形的雷达图，在多边形的雷达图中，不会出现雷达图与网格线的不合理交叉(雷达图与网格线交叉两次)，使用多边形网格线更合理。

3.4K1 0

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

海龟作图 1.海龟移动和绘制 2.获取海龟的状态 3.设置与度量单位 4.画笔绘图状态 5.画笔颜色控制 6.填充 7.更多绘图控制 8.海龟可见性 9.海龟外观 10.使用事件 11.特殊海龟方法 1...size是点的大小，为整型；缺省为默认值 *color是点的颜色的英文单词，为字符串类型 stamp() 印章在海龟当前位置绘制一个海龟形状【需要提前设置海龟形状，缺省为箭头形状】，并返回该印章的...tilt(angel) 倾斜海龟形状自其当前的倾角转动 angle 指定的角度，但不改变海龟的朝向 (移动方向)。...这可以用于定义一个新形状或一个复合形状的多个组成部分。 10.使用事件 onclick(fun, btn=1, add=None) 当鼠标点击将 fun 指定的函数绑定到鼠标点击此海龟事件。...如果 fun 值为 None，则移除现有的绑定 fun – 一个函数，调用时将传入两个参数表示在画布上点击的坐标。

1.6K1 0

python之turtle海龟绘图篇

=None, bg=None) 参数分别为画布的宽(单位像素), 高, 背景颜色如: turtle.screensize(800, 600, “green”) turtle.screensize...画笔使用Pen()设定海龟画图对象，即画笔：turtle.Pen() 代码执行后就建立了画布，同时屏幕中间可以看见箭头(arrow)，即所谓的海龟在海龟绘图中，海龟的起点即画布中央为 (...0,0)，移动单位是像素 (pixel) 描述海龟时使用了两个词语:坐标原点(位置),面朝x轴正方向(方向), turtle绘图中, 就是使用位置方向描述海龟(画笔)的状态 3.绘图命令操纵海龟绘图有着许多的命令...(右边)画圆 extent(弧度) (optional) steps (optional) (做半径为radius的圆的内切正多边形,多边形边数为steps) turtle.setheading(angle...()：用来停止画笔绘制，但绘图窗体不关闭 4.绘图举例绘制正方形：每输入一条指令，都可以看到海龟前进绘图和转向绘制太阳花：绘制分形树：绘制趣图：绘制五角星：

3.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭