绘制彩虹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;
}
});
绘制彩虹html代码,HTML5 Canvas 彩虹螺旋图生成器相关推荐
- html雷达图代码,HTML5 Canvas制作雷达图实战
代码实现 Document canvas{ } var mW = 400; var mH = 400; var mData = [ ['速度77', 21], ['力量72', 56], ['防守46 ...
- html canvas图片上绘制文字,如何用HTML5 CANVAS绘制文字
您可能感兴趣的话题: 绘制文字 核心提示:如何在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色. 我们可以在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体, ...
- HTML5 canvas 设置背景图
页面代码如下 <!DOCTYPE html> <html><head><meta charset="utf-8"><title ...
- html绘制圆形和弧形的代码,html5 canvas用来绘制弧形的代码实现
这篇文章给大家分享的内容是关于html5 canvas用来绘制弧形的代码实现,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助. 1.绘制弧形context.arc( centerx, ...
- HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
- html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
- html 画圆点代码,HTML5 Canvas绘制圆点虚线实例
HTML5 Canvas 提供了很多图形绘制的函数,但是很可惜,Canvas API只提供了画实线的函数(lineTo),却并未提供画虚线的方法.这样的设计有时会带来很大的不便,<JavaScr ...
- 谷歌图标html5代码,HTML5 canvas绘制chrome浏览器 logo图标_网页代码站(www.webdm.cn)
HTML5 canvas绘制chrome图标 使用canvas绘制chrome logo $ele:null, ele:null, context:null } $(function(){ oCanv ...
- html制作图片动画效果代码,HTML5 Canvas:制作动画特效
编辑推荐: 本文来自于jquery之家 ,html5制作canvas动画的基本步骤,控制canvas动画和实例代码. 要在 HTML5 canvas 中绘制图像动画效果,你需要绘制出每一帧的图像,然后 ...
最新文章
- python安装包_迈出Python学习第一步:Python开发环境的下载与安装
- CSDN七夕包分配,最后一天啦!
- java+JBroFuzz对restful api进行fuzz测试
- Hadoop Hive概念学习系列之hive里的HiveQL——查询语言(十五)
- JVM专题(2)-类加载器子系统
- Python sys.stdout sys.stdin
- Java EE 7发布–反馈和新闻报道
- 利用websocket实现一对一聊天
- RPC协议与Web Service
- C语言 pthread_cancelpthread_detach
- L1-055 谁是赢家-PAT团体程序设计天梯赛GPLT
- DevC++ 软件下载及安装教程(详细、具体)
- ios 更多 Url Schemes
- Denoise_bayerdomain
- 2021年中国人口数量、人口结构现状、男女比例及人口增长情况分析[图]
- C#串口通信——协议格式
- 谷歌开源芯片 180 纳米制造工艺
- 【蓝桥杯省赛学习题Java】座次问题
- SQLServer锁表
- 28个在线游戏编程学习网站
热门文章
- 标题显示字数限制 html css,【紧急】我想问一下HTML的TITLE标签,里面的内容能填写多少个?有限制吗_html/css_WEB-ITnose...
- 钉钉一个人怎么多部门 钉钉一个人加入多个部门的技巧
- 阮一峰的JavaScript 的 this 原理
- sql 两表数据合并_多表查询SQL语句
- 脚手架 mixin (混入)
- raml2html 安装,Raml实践
- mongodb mysql 写_MySQL和MongoDB语句的写法对照
- HTMLCSS————块元素与内联元素
- ubuntu安装mysql5.7.17_ubuntu 16.04安装mysql-server_5.7.17
- python 打印xml文档树_[Python]xml.etree.ElementTree处理xml文档