html5画布星空,HTML5 Canvas星空|星域背景图生成器
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
console.clear();
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
function rgba(triplet, opacity) {
var args = triplet.map(a => Math.round(Math.max(0, Math.min(a, 255))));
return `rgba(${args.join()},${opacity})`;
}
function gradient(opts) {
var gradient = ctx.createRadialGradient(opts.x, opts.y, opts.r, opts.x, opts.y, 0);
gradient.addColorStop(0, rgba(opts.color, 0));
gradient.addColorStop(1, rgba(opts.color, opts.opacity || 1));
ctx.fillStyle = gradient;
ctx.fillRect(opts.x - opts.r, opts.y - opts.r, opts.r * 2, opts.r * 2);
}
function makeCloud(opts) {
let colors = opts.colors || [
[255, 255, 255]
];
var cycle = 0;
for (let i = 0; i < 20; i++) {
var intensity = Math.random() / 2 + 0.5;
var width = (Math.random() / 2 + 0.5) * (Math.min(opts.w, opts.h) / 3);
let theseColors = colors[cycle++].map(c => c * intensity);
if (cycle >= colors.length) cycle = 0;
var x = (opts.w - width * 2) * Math.random() + width + opts.x - opts.w / 2;
var y = (opts.h - width * 2) * Math.random() + width / 2 + opts.x - opts.h / 2;
gradient({
color: theseColors,
opacity: Math.random() * (opts.maxOpacity || 1),
r: width,
x: x,
y: y,
})
}
}
function star(opts) {
gradient({
x: opts.x,
y: opts.y,
r: opts.r * 8 * Math.random(),
color: opts.color,
opacity: opts.opacity * 0.1,
});
gradient({
x: opts.x,
y: opts.y,
r: opts.r * 4,
color: opts.color,
opacity: opts.opacity * 0.25,
});
gradient({
x: opts.x,
y: opts.y,
r: opts.r,
color: opts.color,
opacity: opts.opacity,
});
}
function go() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let j = 0; j < 3; j++) {
makeCloud({
w: canvas.width * 2,
h: canvas.height * 2,
x: canvas.width / 2,
y: canvas.height / 2,
colors: [
[163, 0, 130],
[0, 100, 120],
[0, 100, 120],
],
maxOpacity: 0.1,
count: 10
});
for (let i = 0; i < 500; i++) {
star({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: Math.random(),
opacity: Math.random(),
color: [
200 + Math.random() * 55,
100 + Math.random() * 155,
200 + Math.random() * 55,
]
});
}
// stars that clump together
for (let k = 0; k < 3; k++) {
let x = Math.random() * canvas.width;
let y = Math.random() * canvas.height;
let dirX = Math.random() * 2 - 1;
let dirY = Math.random() * 2 - 1;
let fudge = canvas.width / 30;
for (let i = 0; i < 1000; i++) {
star({
x: x += ((Math.random() - .5) * fudge + dirX),
y: y += ((Math.random() - .5) * fudge + dirY),
r: Math.random() * 1,
opacity: Math.random(),
color: [
200 + Math.random() * 55,
100 + Math.random() * 155,
200 + Math.random() * 55,
]
});
}
for (let i = 0; i < Math.random() * 8 + 4; i++) {
star({
x: x += ((Math.random() - .5) * fudge * fudge),
y: y += ((Math.random() - .5) * fudge * fudge),
r: Math.random() * 4 + 2,
opacity: 1,
color: [
200 + Math.random() * 55,
100 + Math.random() * 155,
200 + Math.random() * 55,
]
});
}
}
}
}
go();
document.querySelector('button').addEventListener('click', go);
html5画布星空,HTML5 Canvas星空|星域背景图生成器相关推荐
- android微信朋友圈背景图片渐变,【图】怎么生成朋友圈背景?微信朋友圈背景图生成器推荐...
当你打开任何一个朋友的微信朋友圈,首先映入眼帘的是什么呢?你可能会说是他的头像,但其实最吸睛的除了头像之外还有朋友圈的背景图.这块地方比头像的位置更为宽大,我们在这里可以充分发挥自己的想象力设计出适合 ...
- SVG 背景图生成器:Heazy
Heazy,一款在线的SVG 背景图生成器,能够让你的网站背景.设计文稿.PPT.海报背景等等生成酷炫的SVG背景图,使用的时候,根据提供的预设SVG背景图模版进行手动参数调整或者随机推荐,即可创作出 ...
- echarts (二) 之canvas设置地图背景图
实现效果如下: echarts效果实现参考:echarts地图连线动效之(一) 接下来说这个背景图是如何利用canvas实现的: 首先在初始化echarts后增加下面代码: `` var chart ...
- html5画布作品,HTML5 Canvas 画布(示例代码)
一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素 加上基本的属 ...
- html5画布页面,HTML5 界面元素 Canvas 参考手册
HTML5 界面元素 Canvas 参考手册 转载请保留此句:太阳火神的美丽人生 - 本博客专注于敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否 ...
- html5画布作品,HTML5 canvas画布
这里创建canvas标签,并定义其id为mycanvas,便于javascript绘图时获取该标签对象. 再看javascript绘图部分: var c=document.getelementbyid ...
- html5画布时钟cnsd,canvas动画时钟
最近在学canvas,然后根据MDN上的例子做了个动画时钟(为什么要造个轮子,因为丑..) 这是MDN上的例子,怎么说呢,比较复古吧. 首先,找一张时钟的图片,就是下面这张了. --来自bigger ...
- html5画布正五角星,canvas 正五角星如何画
freeeWilll 给你一个正五角星的画法示例吧.如下:html> window.οnlοad=function() { var cvs=document.getElementById('ca ...
- html5 星空,用canvas实现简单的星空效果
用canvas实现简单的星空效果 因为日常被人说博客没文章所以就算只是写了个很简单的小星星也努力的把过程拼凑出来写个博客辣!(. Step.0 涉及到的所有的代码都放在了我的github上 首先看一下 ...
最新文章
- 差分阻抗为多少_谈谈差分信号
- Python 中更优雅的环境变量设置方案
- android Handler机制之ThreadLocal详解
- 机器人 知乎碧桂园_从房地产大亨到跨界造“机器人”,碧桂园葫芦里卖着什么药?...
- 【转】Asp.net控件开发学习笔记整理篇 - WebControl基类
- log4net.SignalR - 日志即时发送客户端页面
- Android之android.system.ErrnoException: open failed: ENOENT (No such file or directory)
- leetcode剑指 Offer 42. 连续子数组的最大和(动态规划)
- GIT的 .gitignore 配置
- 手机短号(hdu2081)
- 【沫沫金】Sql子查询Not In 无结果原因
- Linux系统Ubuntu vim安装plugin
- 通关制单机器人_智能通关云平台
- linux图片卡通处理,Linux下声卡通 (转)
- 计算机考研需要分数线,计算机考研分数线是多少?
- 水星无线路由器设置虚拟服务器,水星路由器无线中继设置步骤
- Android系统裁剪:手把手教你如何进行系统裁剪
- 服务器系统漏洞修补记录,服务器安全狗之系统漏洞修复教程与实例
- 2021-08-30-全排列-逆序数-排列的奇偶性
- K.田园的饭可好吃了
热门文章
- 贪吃蛇面向对象c语言,贪吃蛇源码解析(面向对象)
- 全网通成为主流对华为海思和联发科不利!
- Python爬虫 从小白到高手 各种最新案例! Urllib Xpath JsonPath BeautifulSoup
- android(41)(支付宝服务和捕鱼达人)
- 企业级开发框架---Django(一)
- 去律师面试python_律所面试应该怎样准备?
- HTML5和CSS3
- wpm2341_如何仅用12行Python构建910 wpm的键入Bot
- pythonurllib新浪微博_Python 爬虫如何机器登录新浪微博并抓取内容?
- 如何去除视频水印?方法超简单