html漩涡源码,html5 canvas多边形漩涡
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
const _C = document.getElementById('canvas') /* canvas element */ ,
C = _C.getContext('2d') /* 2L canvas context */ ,
L = _C.width /* edge length of canvas square */ ,
O = -.5 * L /* top left corner coord if 0,0 is in the middle */ ,
R = L / Math.SQRT2 /* half diagonal of canvas square */ ,
RC = .05 * L /* polygon circumradius */ ,
UA = 2 * Math.PI / 360 /* unit angle = 1 degree */ ,
POLY = [] /* array to fill with polygons */ ,
N = 500 /* total number of polygons */ ,
/* hex values for paint buckets */
THEME = ['#c76cd8', '#ee4198', '#c9244e', '#e57442', '#f9c240'],
NT = THEME.length /* number of paint buckets */ ,
OPTS = ['fill', 'stroke'],
NO = OPTS.length,
FN = ['line', 'move'];
function rand(max = 1, min = 0, dec = 0) {
return +(min + (max - min) * Math.random()).toFixed(dec)
};
class RandPoly {
constructor() {
/* SHAPE PROPERTIES */
this.n = rand(8, 3); /* number of vertices */
this.α = 2 * Math.PI / this.n; /* base angle corresp to an edge */
/* PAINT PROPERTIES */
this.o = rand();
this.b = rand(NT - 1); /* number of paint bucket we put it in */
/* POSITION PROPERTIES */
/* polar coordinates */
this.r = rand(R + RC); /* position radius */
this.β = Math.random() * 2 * Math.PI; /* position angle */
this.γ = rand(1.5, .125, 3) * UA; /* revolution speed */
}
get coords() {
let vx = [],
f;
if (--this.r < 0) this.r = R + RC;
this.β += rand(1.1, .9, 3) * this.γ;
f = this.r / R;
for (let i = 0; i < this.n; i++) {
let ca = this.β + i * this.α;
vx.push([
Math.round(this.r * Math.cos(this.β) + f * RC * Math.cos(ca)),
Math.round(this.r * Math.sin(this.β) + f * RC * Math.sin(ca))
])
}
return vx
}
};
function draw() {
C.clearRect(O, O, L, L);
for (let i = 0; i < NT; i++) {
let b = POLY.filter(c => c.b === i);
for (let j = 0; j < NO; j++) {
let opt = b.filter(c => c.o === j);
C[`${OPTS[j]}Style`] = THEME[i];
C.beginPath();
opt.forEach(p => {
let vx = p.coords;
for (let k = 0; k <= p.n; k++) {
C[k ? 'lineTo' : 'moveTo'](...vx[k % p.n])
}
});
C.closePath();
C[`${OPTS[j]}`]();
}
}
requestAnimationFrame(draw);
};
function init() {
C.translate(-O, -O);
C.lineWidth = 3;
C.globalCompositeOperation = 'screen'
for (let i = 0; i < N; i++) {
let p = new RandPoly();
POLY.push(p);
}
draw()
};
init();
html漩涡源码,html5 canvas多边形漩涡相关推荐
- html5canvas绘制图片源码,HTML5 CANVAS:绘制图片
HTML5 CANVAS:绘制图片 通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...
- html5 刮刮乐 源码,HTML5 canvas实现刮刮乐功能
最近比较闲,除了在群里给大家交流交流,就没啥学习重心.看了论坛里的各种帖子,各种问题满天飞,这里我就整理了2个h5 canvas的demo,分享给大家! 使用html5的canvas实现刮刮乐功能 舍 ...
- bubbles html5游戏源码,html5 canvas弹性气泡爆破 | 撒花动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 const Util = {}; Util.timeStamp = function() { return ...
- html5黑板源码,HTML5/Canvas黑板涂鸦动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 class Pencil { constructor( x, y ) { this.position = { ...
- android 漩涡动画,html5 canvas酷炫的粒子漩涡动画特效
特效描述:html5 canvas 粒子漩涡 动画特效.html5粒子漩涡动画,酷炫的粒子动画特效 代码结构 1. HTML代码 function project3D(x,y,z,vars){ var ...
- 画闭合的多边形 - HTML5 Canvas 作图
10.function DrawPolygon(Canvas,P) 功能:画闭合的多边形 参数:P是一个包含各个顶点坐标的数组 实例: <html> <script type=&qu ...
- html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形 从绘制直线 到 路径 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
- HTML5/Canvas太空射击类小游戏源码
下载地址 JavaScript HTML5/Canvas太空射击类小游戏源码,非常值得学习的一款js射击小游戏代码,美术有点老旧,但是代码是完全开源的,有参考价值. dd:
- html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
最新文章
- 线上分享 | 增长思维:如何选择最优增长模式?
- 奇咔咔机器人教育_奇咔咔机器人教育,提升孩子的注意力
- php-v 查看不到版本,解決php -v查看到版本於phpinfo()打印的版本不一致問題
- 成为更优秀的开发人员:第二步-知道你的核心竞争力
- git 合并提交 error: cannot ‘squash‘ without a previous commit
- Shiro缓存(十三)
- Android如何解析Intent
- 调查称谷歌占北美25%互联网流量
- android开发:Android 中自定义属性(attr.xml,TypedArray)的使用
- Java实现简易四则运算器
- 在 Python 中使用网格搜索和随机搜索进行超参数调整
- Spotfire 条形图属性 直线和曲线 格式设置
- PCB设计经验(1)
- linux平台 doc转pdf,linux doc ppt 转 pdf
- 写贺卡给毕业师姐怎么写计算机系的,[给师姐的毕业祝福语]对师姐的毕业祝福语...
- 前端性能优化之WebP图片
- Ubuntu20.04安装yum
- 心怀远方,顶峰相见!!!
- 内存管理(五)——内存回收
- 最早游戏空当接龙计算机,电脑中随机附带的游戏空当接龙怎么玩?