html代码设置五边形,javascript怎么画正五边形?
javascript怎么画正五边形?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
如何用程序来绘制正多边形?
在一般情况下,会使用 x = radius * Math.cos(angle), y = radius * Math.sin(angle) 来进行绘制,但这是关于x轴对称的,如果遇到正多边形的边数为奇数,而你又希望它是以y轴对称时,可按照下面的方法。
如图,正五边形ABCDE关于y轴对称,B与E,C与D互为对称点。A的坐标为(0, r)。 半径OA旋转一个内角θ,便是OB,此时B的坐标为(r·sin0, r·cos0)。继续旋转,可以得到OC、OD、OE等半径,坐标求法与OB的一致,只需把对应的角度依次增加(2π/边数)。
编程的流程图如下
使用两个javascript文件:
Polygon.js —— 正多边形的类,在构造函数中求得所有的顶点,放在数组verticesvar Point = function(x, y)
{
this.x = x;
this.y = y;
};
var Polygon = function(x, y, radius, sides)
{
this.x = x;
this.y = y;
this.radius = radius;
this.sides = sides;
this.vertices = getPoints(x, y, radius, sides);
function getPoints(x, y, radius, sides){
var points = [],
angle = 0,
centerAngle = 2 * Math.PI / sides;
for(var i = 0; i < sides; i++){
points.push(new Point( x + radius * Math.sin(angle), y - radius * Math.cos(angle) ));
angle += centerAngle;
}
console.log(points);
return points;
}
this.strokeStyle = 'black';
this.fillStyle = 'rgba(200, 200, 200, 1)';
};
Polygon.prototype = {
createPath: function(context){
context.beginPath();
context.moveTo(this.vertices[0].x, this.vertices[0].y);
for(var i = 1; i < this.sides; i++){
context.lineTo(this.vertices[i].x, this.vertices[i].y);
}
context.closePath();
},
stroke: function(context){
context.save();
this.createPath(context);
context.strokeStyle = this.strokeStyle;
context.stroke();
context.restore();
},
fill: function(context){
context.save();
this.createPath(context);
context.fillStyle = this.fillStyle;
context.fill();
context.restore();
}
}
drawPolygon.js —— 把多边形画到canvas上function init(){
var canvas = document.getElementById('canvas'),
cxt = canvas.getContext('2d');
var polygon = new Polygon(200, 200, 130, 5);
polygon.stroke(cxt);
}
更多web前端知识,请查阅 HTML中文网 !!
html代码设置五边形,javascript怎么画正五边形?相关推荐
- 怎么画正五边形步骤_正五边形尺规画法的理论探索
原标题:正五边形尺规画法的理论探索 数学教学研究本公众号内容均由邵勇本人独创,可以转发,但转载则需获得邵勇本人的授权.每周推送两到三篇内容上有分量的数学文章,但在行文上力争做到深入浅出.几分钟便可读完 ...
- 【Scratch考级99图】图10-等级考试scratch 画正五边形
一.案例介绍 在舞台正中央绘制如下图形,要求: 1.按要求绘制如上图形 2.五边形的边长为100,不能有多余的线条 二.案例演示 [Scratch案例演示]Scratch图10-绘制正五边形 三.案例 ...
- 怎么画正五边形步骤_每个药店必备三伏贴的POP海报,我教你画
今天我们来分享一张三伏贴的POP海报 先准备好工具 20mm油性马克笔 6mm油性马克笔 涂改液 铜版纸 第一步:我们先用20mm油性马克笔吧"三伏贴"写出来,写在最中间哦,书写的 ...
- 怎么画正五边形步骤_悄悄告诉你们:一种没有美术基础,也能画好画的方法
没有学过画画,就不能享受画画的乐趣了吗?涂鸦是人类的天性,小孩子抓起画笔就会乱涂乱画,而禅绕画正是让你头脑放空.享受创作的最好方式-- 它是什么? 这是一种易于学习的 轻松且有趣的绘画方法 利用重复的 ...
- 计算正五边形的面积和周长
从下列的抽象类shape类扩展出一个正五边形(regular pentagon)类RPentagon,这个类将正五边形的边长作为私有成员,类中包含初始化这个值的构造方法. public abstrac ...
- python五边形的代码_python正五边形代码
python正五边形代码 第一步先找规律,抽象化问题.首先我们观察到,第一行为[1],我们直接赋给一个变量:初始化数列 p = [1].核心点是这个除去首位两个 [1] 的中间部分:[p[0] + p ...
- 五边形创意画_我做的数字布球~~看我怎样不用圆规画出正五边形!
想给萌萌做个用来认数字的布球~~ 感谢允豆儿麻麻的帖子,让我想到要用12个五边形来做一个球,这样每块布可以相对剪得大一点,能把缝数字在上面. 可是, 碰到的第一个难题就是:哪里去弄五边形的纸样?! ...
- html中怎么写正六边形,如何用css画正六边形?用css画正六边形的两种方法(代码实例)...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
- 美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统。2014年底,为庆祝“计算机科学教育周”正式启动,奥巴马编写了很简单的计算机代码:在屏幕上画一个正
美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统.2014年底,为庆祝"计算机科学教育周"正式启动,奥巴马编写了很简单的计算机代 ...
最新文章
- MYSQL_使用外键约束(constraint)或触发器(trigger)来进行级联更新、删除
- 再读simpledb 之 元数据管理(3)
- 【解题报告】Leecode 2057. 值相等的最小索引——Leecode周赛系列
- linux,下载与安装
- 悬赏百万美金,检测Deepfake假视频,数据集有470G:很久不见这么壕的比赛
- Linux下安装ActiveMQ
- 嵌入式Linux系统编程学习之二十五信号量
- ActiveMQ 依赖JDK版本
- 关于如何调用Datalist里面的Datalist
- 第三方接口,消息保障性发送机制
- dow_interruptible() 源码及函数返回分析
- 学神经网络需要什么基础,神经网络需要什么基础
- 058.克鲁斯卡尔(Kruskal)算法的原理以及解决最小生成树问题
- matalb读取txt文件以及将数据写入txt文件
- 自行车平衡分析和控制-转载
- utils方法,时间工具,数组排序,违禁词检测
- java目前开发的背景_Java web 开发构想[一] 背景和形势
- 线性分类(四)-- 高斯判别分析 GDA
- js实现绑定多个按钮并当点击某个按钮时改按钮颜色改变
- 医院CRM是什么?医院CRM能做什么?