canvas标签画正多边形函数

最新推荐文章于 2024-05-08 15:18:16 发布
最新推荐文章于 2024-05-08 15:18:16 发布
阅读量3.7k 收藏 3
点赞数
分类专栏： html5 文章标签： canvas html5 正多边形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012948710/article/details/20048861
版权 
<!DOCTYPE HTML>
<canvas id="canvas" width="600px" height="500px" style="border:1px solid #A6A7A6;"></canvas>
<script>
	/*
	*以(x,y)为中心，半径为r的正n边形
	*@param c 是canvas的上下文对象
	*@param angle 是第一个点(以最上面的顶点为准)偏离中心点(x,y)的弧度
	*	angle为0时第一个点和中心的x想等，如第一个正方形
	#@param counterclockwise 是angle偏离是顺时针还是逆时针
	*/

	function polygon(c,n,x,y,r,angle,counterclockwise){
		var angle = angle || 0;
		var counterclockwise = counterclockwise || false;
		c.moveTo(x + r*Math.sin(angle), y - r*Math.cos(angle));		//确立第一个点
		var delta = 2*Math.PI/n;		//相邻两个顶点之间的夹角
		for(var i=0;i<n;i++){			//其他顶点
			angle += counterclockwise ? -delta : delta;		//角度调整
			c.lineTo(x + r*Math.sin(angle), y - r*Math.cos(angle));
		}
		c.closePath();		//首位相邻

	}
	var canvas = document.getElementById('canvas');
	var c = canvas.getContext("2d");
	c.beginPath();
	polygon(c,4,60,200,40);
	polygon(c,4,180,200,40,Math.PI/4);
	polygon(c,6,300,200,40,Math.PI/6);
	polygon(c,12,460,200,40);
	c.fillStyle = '#f00';
	c.fill();
</script>





Andy Ron
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas绘制正多边形
wdhouyigege的博客
05-17 439
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas玩法&lt;/title&gt; &lt;script src="js/jquery-1.8.3.js"&amp
canvas 绘制简单多边形
m0_61801872的博客
08-16 1505
canva绘制多边形
canvas arc()画1/4圆的注意点
weixin_55014951的博客
04-24 467
canvas这个方面我接触的还很少,无意间了解了怎么用canvas画圆,发现了其中一个坑点,给大家提个醒 画圆的核心代码就一句,其他步骤自行了解 ctx.arc(x,y,40,0,2*Math.PI,false); x和y是圆心的坐标值 40是半径大小 0是起始弧度 2*Math.PI是结束弧度,Math.PI代表一个π,一个π等于180度,2个π才是圆 最后一个选择顺时针还是逆时针画圆,默认顺时针也就是false 看实际效果 后面是本文重点了 当我们想画一个1/4圆的时候 顺时
canvas基础：绘制线段，绘制多边形
大剑师兰特的GIS世界
11-27 777
专栏提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。
【绘制】HTML5 Canvas正多边形的绘制（三角形、矩形、五边形、六边形等等）
苏一恒
09-11 4269
介绍 在Canvas教程中，我们已经实现全部的基本图形，包括线段、矩形、圆弧、圆形、贝塞尔曲线等等。但是我们肯定要再canvas中绘制除此之外的其他图形，比如三角形、六边形、八边形等等。 其实配合moveTo()与lineTo()方法，再结合一些简单的三角函数，就能绘制任意边数的多边形。下面演示了如何利用三角函数绘制多边形的某个部分。 如图展示了如何利用多边形外接圆圆心和半径，计算多边形...
使用Canvas画出多个多边形Polygon
⑥②专栏
06-06 1391
使用Canvas画出多个多边形Polygon
canvas绘制多边形
08-31
本文将深入讲解如何使用`canvas`来绘制多边形，通过示例代码详细解析绘制过程。 首先，我们需要在HTML页面中创建一个`canvas`元素，指定其宽度和高度，以便为绘图提供足够的空间： ```html <canvas id="myCanvas" ...
canvas绘图任意矩形、多边形
10-19
本教程将深入探讨如何利用Canvas API实现鼠标拖动绘制任意矩形和多边形的功能。 首先，我们需要在HTML文件中创建一个`<canvas>`元素，并设置其id以便于在JavaScript中引用。例如： ```html <!DOCTYPE html> ...
Canvas多边形绘制
09-24
"Canvas多边形绘制"这个主题涉及到如何使用JavaScript在Canvas上绘制任意角度的正多边形。下面将详细阐述相关知识点。 首先，Canvas API提供了`canvas.getContext('2d')`方法，返回一个2D渲染上下文，这是在Canvas...
android canvas 画曲线图 画三角形（多边形）
06-14
本篇文章将详细讲解如何利用Canvas在Android中画曲线图和三角形（多边形），并结合示例代码帮助理解。 首先，我们要明白Canvas的基本用法。Canvas是Android中的一个类，它提供了在Bitmap上绘制图形的方法。通常，...
Canvas绘制正五边形雷达图
12-28
Canvas绘制正五边形雷达图，代码简单，需要的朋友可以下载后自己修改。
canvas鼠标绘制多边形
08-18
使用canvas 鼠标事件绘制多边形，鼠标按下事件，移动事件绘制，双击事件结束绘制。原生js，使用添加事件监听，移除事件监听方法来进行绘制开始和结束。简单小demo
canvas赋值分割图片多块动画
08-29
Canvas是一个基于像素的画布，我们可以通过`<canvas>`标签在HTML文档中创建它，并通过JavaScript的`CanvasRenderingContext2D`对象进行绘图操作。例如，我们可以使用`drawImage()`方法将图片加载到Canvas上： ```...
【无标题】vue canvas画多边形
Jokerxiuka的博客
08-09 424
vue绘制多边形
canvas手绘正五边形
大树之殇的博客
09-22 2702
一、基本用法：alertShow(param: any, $index: any) { let $log = this.$log; let $scope = this.$scope; if (param !== $scope.lastObj) { param.show = true; if ($scope
canvas画正六边形
热门推荐
熊猫正尽责
11-09 1万+
效果图如下： 代码如下： 正六边形 var canvas = document.querySelector('#canvas'), context = canvas.getContext('2d'); // 定义边长、颜色、边数、canvas大小 var length = 100, fillColor = '#000', vertices
在canvas上画多边形的几种方式
xiayingping的专栏
06-26 4131
记得帮一个公司写过一个项目，该项目是视频监控系统，使用Silverlight框架，实现在监控区域上画多边形，圆形，长方形等，主要是在监控区域上放置一个canvas用于画图，可以支持选择的区域的事件侦测，画圆形和长方形的鼠标操作方式单一，主要是画多边形的鼠标实现方式有几种 1，按住鼠标左键，拖动鼠标，释放鼠标左键，形成一条边，再添加新的边时，需要重新按住左键，重复之前的操作，而且选择点的时候要在之
使用canvas绘制六边形
风舞红枫的个人博客
12-01 1744
近期遇到了一个六边形边框的需求，实现如下图效果：有六边形边框，中间是一张图片，图片超出的部分要裁切掉。 代码实现如下： <html> <head> <style> html,body{ width:100%; height:100%; padding:0; margin:0; } canvas{ position: absolute; top:0; left:0; right:0;
Canvas绘画之简单的多边形绘画
最新发布
weixin_54048131的博客
05-08 209
【代码】Canvas绘画之简单的多边形绘画。
python用circle画正多边形
09-16
### 回答1： 可以使用turtle库中的circle函数来画正多边形。具体步骤如下： 1. 导入turtle库 ```python import turtle ``` 2. 创建画布和画笔 ```python canvas = turtle.Screen() pen = turtle.Turtle() ``` 3. 设置画笔的颜色和粗细 ```python pen.color('red') pen.pensize(2) ``` 4. 定义正多边形的边数和边长 ```python num_sides = 6 # 正六边形 side_length = 100 # 边长为100 ``` 5. 计算正多边形的内角度数 ```python interior_angle = (num_sides - 2) * 180 / num_sides ``` 6. 循环画出正多边形的每条边 ```python for i in range(num_sides): pen.forward(side_length) pen.left(180 - interior_angle) ``` 7. 关闭画布 ```python canvas.exitonclick() ``` 完整代码如下： ```python import turtle canvas = turtle.Screen() pen = turtle.Turtle() pen.color('red') pen.pensize(2) num_sides = 6 # 正六边形 side_length = 100 # 边长为100 interior_angle = (num_sides - 2) * 180 / num_sides for i in range(num_sides): pen.forward(side_length) pen.left(180 - interior_angle) canvas.exitonclick() ``` ### 回答2： 使用Python绘制正多边形，可以利用turtle模块中的circle函数来实现。该函数可以绘制一个指定半径和边数的圆形，通过调整参数可以使其变为一个正多边形。 首先，我们需要导入turtle模块： ```python import turtle ``` 然后，可以创建一个画布，并设置其背景色和画笔颜色： ```python screen = turtle.Screen() screen.bgcolor("white") turtle.color("black") ``` 接下来，可以创建一个turtle对象，并设置其形状为箭头： ```python pen = turtle.Turtle() pen.shape("arrow") ``` 然后，可以定义一个函数来绘制正多边形。该函数需要传入两个参数，分别为半径和边数： ```python def draw_polygon(radius, sides): angle = 360 / sides # 计算出每个内角的度数 for _ in range(sides): pen.forward(radius) # 前进半径的距离 pen.right(angle) # 右转指定角度 ``` 在主程序中，可以调用该函数来绘制正多边形。比如，可以绘制一个边长为100的正五边形： ```python draw_polygon(100, 5) ``` 最后，不要忘记调用turtle模块中的done函数来保持窗口不关闭： ```python turtle.done() ``` 通过上述步骤，我们就能够使用Python绘制一个正多边形了。 ### 回答3： 在Python中，可以使用turtle模块的circle函数来绘制正多边形。首先，我们需要导入turtle模块。 ```python import turtle ``` 然后，创建一个画布和一个画笔。 ```python window = turtle.Screen() pen = turtle.Turtle() ``` 接下来，我们可以使用circle函数来绘制正多边形。正多边形的每个内角都相等，因此我们可以通过改变circle函数的半径和角度参数来实现。 ```python pen.circle(100, steps=6) # 绘制边长为100的六边形 ``` 其中，第一个参数表示圆的半径，第二个参数steps表示多边形的边数。 最后，我们需要保持窗口不关闭，以便查看绘制的图形。 ```python turtle.done() ``` 以上就是使用Python的turtle模块绘制正多边形的基本步骤。可以根据需要调整半径和边数来绘制不同大小和形状的正多边形。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值