canvas ：五角星的代码实现

对于五角星的canvas画布绘制，很好奇，抱着这种心情进行了小尝试，并发现了挺有意思的规律。

本人实现的五角星形状是：

其实五角星形状挺好实现的，找到规律进行容易。其逻辑为：

有外圈和内圈之分，看起点是在内圈还是外圈，如果在外圈那么奇数点就在外圈，偶数点在内圈。图中的起点在外圈，那么进行绘制图形的时候，是由点与点之间画线绘制的，按照顺序1,2,3,4......在画布上描点(内圈点，外圈点通过奇偶性就可以判断出来)，之后再去连线即可。

五角星的形状，可以有外圈半径和内圈半径的比例控制的，本人绘制的五角星是外圈半径R / 内圈半径r = 2 / 1，相对没有那么锋利。

如果R/r > 2/1 ,内圈圆会变小，往里缩，调试中就会看到五角星的线是在统一水平线上，如下图片，第一张，如果圈圈半径继续小，五角星会越来越瘦，就会变成下图第二章的情况。

如果R/r < 2/1，内圈圆继续变大，五角星会越来越肥胖，如下图

如果R/r = 1，内圈圆半径与外圈圆半径相等，五角星会变成等十边形，如下图

如果R/r < 1，内圈圆半径大于外圈圆半径，这种情况下，外圈圆变为内圈圆，内圈圆成为外圈圆了，即五角星的凸角和凹角会发生替换，变成了倒五角星，如下图

代码实现过程中，注意三角函数的值为弧度，需要通过 2 * Math.PI / 360 * a 进行转换，其中a为角度，下面代码的实现是R/r = 2/1的情况

// 准备工作
var angle = document.getElementById('angle')
var ctx = angle.getContext('2d')... ...// 实现
let R = rand(27, 30)
let r = R / 2
let a = 0 // 角度// thisX, thisY控制五角星的起始位置，可以将他与鼠标位置进行绑定，五角星就行跟着鼠标走ctx.beginPath()
for (let i = 0; i < 10; i++) {let b = 2 * Math.PI / 360 * a // 转换为弧度let x, yif (i % 2 === 1) {x = thisX + r * Math.sin(b)y = thisY - r * Math.cos(b)} else {x = thisX + R * Math.sin(b)y = thisY - R * Math.cos(b)}ctx.lineTo(x, y)a += 36;
}
ctx.closePath()
ctx.fillStyle = "#f5ed06"
ctx.fill();// 代码实现，并不是全部源码，在源码的基础上更改了小版的，只侧重于其逻辑实现

canvas ：五角星的代码实现相关推荐

python五角星编程代码绘制
大家好,我是你们的好朋友,今天继续分享 Python的编程知识. 在 Python中,有一个非常强大的数据可视化工具: database. dl (),其中有一个功能就是可以绘制五角星. 什么是五角星 ...
HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果: http://hovertree.com/t ...
如何通过canvas 把页面代码转化为图片
今天分享下"如何通过canvas 把页面代码转化为图片"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一 ...
html5实现安卓的手写功能,html5 canvas手写字代码(兼容手机端)(示例代码)
html5 canvas手写字代码(兼容手机端) 画板实验清空生成图片 var canvas,board,img; canvas = document.getElementById('myCan ...
canvas(五角星碰撞)
马上9月份要找工作了,琢磨着要做个作品作为面试时的加分项. 本来打算仿一个淘宝网,但写完淘宝首页竟花了我一个星期!!!光html.css就有4000多行,看着首页都能想象出来后台数据的庞大,估计半年都 ...
HTML5 canvas 240行代码实现粒子漩涡特效
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
canvas画布js代码实现大风车的动画
通过js代码在canvas画布中实现大风车的动画 <!DOCTYPE html> <html lang="en"> <head><meta ...
黑客帝国中代码雨如何实现？用 canvas 轻松实现代码雨炫酷效果！
目录 1 效果 2 用到的知识点 2.1 什么是 canvas标签? 2.1.1 创建一个画布(Canvas) 2.1.2 使用 JavaScript 来绘制图像 2.1.3 Canvas 坐标 2 ...
html5画布作品,HTML5 Canvas 画布(示例代码)
一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素加上基本的属 ...
lisp 绘制立体感的五角星_[原创]圆内加五角星lsp代码,详细有注解
(defun c:5js(/ oce os angb angd en I en_data en_type cenpt rad o1 o2 o3 o4 o5 i1 i2 i3 i4 i5 rad1)- ...

canvas ：五角星的代码实现

canvas ：五角星的代码实现相关推荐

最新文章

热门文章