绘制彩虹html代码,HTML5 Canvas 彩虹螺旋图生成器

JavaScript

语言:

JaveScriptBabelCoffeeScript

确定

$(function() {

var myCanvas, context, width, height;

var lines = [],

numberOfLines = 12;

var colours = ['#FFD800', '#FF6A00', '#FF0000', '#0094FF', '#0026FF', '#4800FF', '#7FFF8E', '#B6FF00', '#4CFF00', '#FFFFFF'];

var Line = function() {

return {

x: 0,

y: 0,

size: 4,

colour: '#FFFFFF',

distance: 1,

speed: 30,

increment: 0.8,

turn: 45,

wobble: 7,

rotation: random(0, 359),

randomVariance: 0,

opacity: 0.5,

clockwise: true,

glow: true,

interval: {},

tick: function() {

var oldX = this.x;

var oldY = this.y;

// Random wander

if (this.randomVariance) {

this.x += random((-1 * this.randomVariance) * this.distance, this.randomVariance * this.distance);

this.y += random((-1 * this.randomVariance) * this.distance, this.randomVariance * this.distance);

}

if (this.clockwise)

this.rotation -= this.turn;

else

this.rotation += this.turn;

// Wobble (point at which lines bend sharply)

if (this.wobble) {

if (this.rotation < 0) this.rotation += this.wobble;

if (this.rotation >= this.wobble) this.rotation -= this.wobble;

}

this.x = this.x + this.distance * Math.sin(this.rotation);

this.y = this.y + this.distance * Math.cos(this.rotation);

if (this.glow) {

drawLine(oldX, oldY, this.x, this.y, this.size * 6, this.colour, 0.03);

drawLine(oldX, oldY, this.x, this.y, this.size * 4, this.colour, 0.05);

}

drawLine(oldX, oldY, this.x, this.y, this.size, this.colour, this.opacity);

this.distance += this.increment;

return this;

},

init: function(details) {

for (var x in details) {

this[x] = details[x];

}

var self = this;

this.interval = setInterval(function() {

self.tick();

}, this.speed);

return this;

},

stop: function() {

clearInterval(this.interval);

}

};

};

if ($("canvas").length > 0) {

myCanvas = $("#canvas")[0];

context = myCanvas.getContext("2d");

resizeCanvas();

eventListeners();

startAnimation();

}

function resizeCanvas() {

myCanvas.width = $("canvas").width();

myCanvas.height = $("canvas").height();

width = myCanvas.width;

height = myCanvas.height;

}

$(window).on('resize', resizeCanvas);

function eventListeners() {

$('#submit').on('click', function() {

var options = {};

$('#controls input[type="text"]').each(function() {

options[$(this).attr('id')] = checkNumber($(this).val());

});

numberOfLines = options.numberOfLines;

var shareString = '';

for (var x in options) {

shareString += options[x] + '|';

}

$('#sharecode').val(shareString);

startAnimation(options);

return false;

});

$('#random').on('click', function() {

randomSettings();

});

$('#hide').on('click', function() {

$('#controls').hide();

});

$('#sharecode')

.on('paste', function() {

setTimeout(function() {

var shareString = $('#sharecode').val().split('|');

$('#controls input[type="text"]').not('#sharecode').each(function(x) {

$(this).val(shareString[x]);

});

$('#submit').trigger('click');

}, 100);

})

.on('focus', function() {

$(this).select();

});

}

function randomSettings() {

var settings = {

numberOfLines: random(2, 12),

size: random(1, 10),

distance: random(1, 30),

speed: random(2, 6) * 10,

increment: random(1, 10) / 10,

turn: random(1, 200),

wobble: random(1, 400),

opacity: random(3, 10) / 10

};

for (var x in settings) {

$('#' + x).val(settings[x]);

}

$('#submit').trigger('click');

}

function startAnimation(options) {

options = options ? options : {};

options.x = width / 2;

options.y = height / 2;

context.clearRect(0, 0, width, height);

for (var x = 0; x < lines.length; x++) {

lines[x].stop();

}

lines = [];

for (var y = 0; y < numberOfLines; y++) {

options.colour = colours[random(0, colours.length - 1)];

options.rotation = (360 / numberOfLines) * y;

lines.push(

Line().init(options)

);

}

}

function drawPoint(x, y, size, colour) {

context.fillStyle = colour;

context.fillRect(x, y, size, size);

}

function drawLine(x1, y1, x2, y2, size, colour, opacity) {

setOpacity(opacity);

context.beginPath();

context.strokeStyle = colour;

context.lineWidth = size;

context.moveTo(x1, y1);

context.lineTo(x2, y2);

context.stroke();

context.closePath();

}

function setOpacity(alpha) {

context.globalAlpha = alpha;

}

function random(min, max) {

return (Math.floor(Math.random() * ((max - min) + 1) + min));

}

function checkNumber(n) {

n = parseFloat(n);

if (isNaN(n) || n < 0) n = 0;

return n;

}

});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/564111.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VC2010运行C程序时黑框一闪就没

黑框一闪就没如何解决的呢&#xff1f; 首先我们要知道为什么黑框一闪就没 闪一下是因为它执行完输出函数(printf)后直接返回系统了。 解决办法 在程序里加一个system(“pause”)&#xff0c;这个是调用系统函数&#xff0c;到时候会显示"按任意键退出"。 使用方…

厦门大学计算机科学与技术学院考研分数线,2020年厦门大学计算机科学与技术考研经验分享...

原标题&#xff1a;2020年厦门大学计算机科学与技术考研经验分享大家好&#xff0c;我是育明考研小赵老师关于2020年厦门大学计算机科学与技术考研信息汇总&#xff0c;请参考一、院校介绍厦门大学(Xiamen University)&#xff0c;简称厦大(XMU)&#xff0c;是中华人民共和国教…

Redis ops详解

Redis缓存数据库的ops问题 我们使用Java操作Redis数据库的时候&#xff0c;往往会输出和ops相关的内容&#xff0c;下面给大家讲解一下ops相关的内容。 ops是什么&#xff1f; redis中的OPS 即operation per second 每秒操作次数。意味着每秒对Redis的持久化操作。 所以我们…

山东大学继续教育计算机在线作业,山东大学继续教育数文字电子技术基础习题3及答案.docx...

精品文档精品文档PAGEPAGE5精品文档PAGE..数字电子技术基础模拟卷3一填空。1逻辑代数中&#xff0c;基本的运算关系是与、或和非。2十进制数27转换成二进制数为11011&#xff1b;转换成8421BCD码是3在逻辑代数中&#xff0c;AABAB&#xff1b;A1。4同一个逻辑函数可以有不同的逻…

Spring操作Redis

在 Spring 中使用 Redis&#xff0c;除了需要 jedis.jar 外&#xff0c;还需要下载 spring-data-redis.jar&#xff0c;这里值得注意的是 jar 包和 Spring 版本兼容的问题&#xff0c;我使用的 jar 包版本是 1.8.1&#xff0c;而 Spring 的版本是 5.0.4&#xff0c;如果使用其他…

考研规划计算机科学与技术,2021考研:计算机科学与技术研究方向及冲刺复习规划...

一、研究方向20数据挖掘技术及应用21智能软件与计算理论22模式识别与图像处理23数据库理论及其应用技术24软件工程与面向对象设计&#xff0c;二、初试科目①101思想政治理论②201英语一③301数学一④408计算机学科专业基础综合三、考试内容和试卷结构数据结构、计算机组成原理…

Redis的6种数据类型

Redis 是一种基于内存的数据库&#xff0c;并且提供一定的持久化功能&#xff0c;它是一种键值&#xff08;key-value&#xff09;数据库&#xff0c;使用 key 作为索引找到当前缓存的数据&#xff0c;并且返回给程序调用者。 当前的 Redis 支持 6 种数据类型&#xff0c;它们…

华师计算机基础在线作业秋,18秋华师《计算机基础》在线作业(20210408185935).pdf...

正确答案 :( 多选题 ) 6: 微型计算机的输入设备主要有 ______ 。A: 键盘B: 鼠标C: 显示器D: 扫描仪正确答案 :( 多选题 ) 7: 以下工具软件属于数据压缩软件的有 ________ 。A: A1UB: WinZipC: RealPlayerD: WinRAR正确答案 :( 多选题 ) 8: 在 Excel 工作表中建立函数的方法有 _…

NoSQL和传统数据库的区别

Redis 等 NoSQL 工具也能够存储数据&#xff0c;有人认为 NoSQL 来会取代数据库&#xff0c;但是我不那么认为&#xff0c;我们要理解 NoSQL 和传统数据库的差异。 首先&#xff0c;NoSQL 的数据主要存储在内存中&#xff08;部分可以持久化到磁盘&#xff09;&#xff0c;而数…

内蒙古工业大学计算机科学与技术,计算机科学与技术的应用领域简述论文内蒙古工业大学.doc...

计算机科学与技术的应用领域简述论文内蒙古工业大学《计算机科学引论》课程专题报告题 目&#xff1a;计算机科学与技术的应用领域简述学生姓名: 徐铭贝学 院&#xff1a;信息工程学院系 别&#xff1a;计算机系专 业&#xff1a;计算机科学与技术班 级&#xff1a;计13-1学 号…

Redis字符串深入

字符串是 Redis 最基本的数据结构&#xff0c;它将以一个键和一个值存储于 Redis 内部&#xff0c;它犹如 Java 的 Map 结构&#xff0c;让 Redis 通过键去找到值。Redis 字符串的数据结构如下图所示。 Redis 会通过 key 去找到对应的字符串&#xff0c;比如通过 key1 找到 v…

Redis哈希数详解

Redis 中哈希结构就如同 Java 的 map 一样&#xff0c;一个对象里面有许多键值对&#xff0c;它是特别适合存储对象的&#xff0c;如果内存足够大&#xff0c;那么一个 Redis 的 hash 结构可以存储 2 的 32 次方减 1 个键值对&#xff08;40 多亿&#xff09;。 一般而言&…

计算机专业英语第三章在线测试,《计算机专业英语》第03章在线测试

《计算机专业英语》第03章在线测试 剩余时间&#xff1a; 57:06 答题须知&#xff1a;1、本卷满分20分。 2、答完题后&#xff0c;请一定要单击下面的“交卷”按钮交卷&#xff0c;否则无法记录本试卷的成绩。 3、在交卷之前&#xff0c;不要刷新本网页&#xff0c;否则你的答题…

Redis链表结构深入

链表结构是 Redis 中一个常用的结构&#xff0c;它可以存储多个字符串&#xff0c;而且它是有序的&#xff0c;能够存储 2 的 32 次方减 1 个节点&#xff08;超过 40 亿个节点&#xff09;。 Redis 链表是双向的&#xff0c;因此即可以从左到右&#xff0c;也可以从右到左遍历…

家用使用计算机组装,不能再简单了!家用电脑DIY组装实操

【天极网DIY硬件频道】【天极网硬件频道】近期有网友对DIY组装电脑比较感兴趣&#xff0c;因为自从智能手机和平板电脑横行霸道之后&#xff0c;家中的PC电脑被使用的时间变少了许多&#xff0c;可是偶尔有工作需求或是别有任务等&#xff0c;所以大家依然是不会让电脑远离的。…

Redis集合深入

Redis 的集合不是一个线性结构&#xff0c;而是一个哈希表结构&#xff0c;它的内部会根据 hash 分子来存储和查找数据&#xff0c;理论上一个集合可以存储 2 的 32 次方减 1 个节点&#xff08;大约 42 亿&#xff09;个元素&#xff0c;因为采用哈希表结构&#xff0c;所以对…

达尔豪西大学 计算机科学,达尔豪西大学计算机科学硕士专业.pdf

达尔豪西大学计算机科学硕士专业.pdf留学监理服务网达尔豪西大学计算机科学 - Computer Science基本信息所 达尔豪西大 所属 学 - 在计算机科学学院学 Dalhousie 院校 University 系专 学计算机科学业 历- Computer 硕士名 层Science称 次授 专予 计算机科学 业计算机与信息科学…

Redis有序集合详解

有序集合和集合类似&#xff0c;只是说它是有序的&#xff0c;和无序集合的主要区别在于每一个元素除了值之外&#xff0c;它还会多一个分数。分数是一个浮点数&#xff0c;在 Java 中是使用双精度表示的&#xff0c;根据分数&#xff0c;Redis 就可以支持对分数从小到大或者从…

如何为你的网站启用HTTPS

步骤一&#xff1a;获取SSL/TLS证书 选择SSL证书提供商&#xff1a; 选择一家可信赖的SSL证书提供商。对于小型网站&#xff0c;JoySSL提供的免费证书是一个不错的选择。购买或申请证书&#xff1a; 根据你的网站需求&#xff0c;购买相应类型的SSL证书。证书的类型包括单域、…

紫金计算机网络,南京理工大学紫金学院《计算机网络技术》考试复习题集试题(卷)(含答案解析)2.doc...

一、选择题&#xff1a;(每题2分&#xff0c;共40分)1&#xff0e;在TCP/IP参考模型中&#xff0c;TCP协议工作在( )。A、应用层 B、传输层 C、互联网层 D、网络接口层2&#xff0e;下列( )是合法的E-mail地址。A、mnetwork B、mnetworkC、mnetwork.ecjtu.jxonline D、3&#x…