html5画分形图形,HTML5/Canvas 可在线调整的朱丽叶分形图
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var scale = 200;
var cR = -.8,
cI = .2;
var r = 0.77,
θ = 169;
var ctrl = document.querySelector('.ctrl');
var c = document.querySelector('.c');
ctrl.addEventListener('input', function(e) {
var input = e.target;
var span = input.nextElementSibling;
span.innerHTML = input.value;
if (input.name == "r")
r = +input.value;
else if (input.name == "θ")
θ = +input.value;
calcC();
init();
});
function calcC() {
cR = Math.cos(θ * Math.PI / 180) * r;
cI = Math.sin(θ * Math.PI / 180) * r;
c.innerHTML = Math.round(cR * 100) / 100 + ' + ' + Math.round(cI * 100) / 100 + 'i';
}
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext("2d"),
WIDTH,
HEIGHT,
z,
c,
ing = 60,
x = 0,
y = 0,
pass = [
//[ 0, 0,64,64,64,64],
[0, 0, 32, 32, 32, 32],
/*[32, 0,64,64,32,64],
[32,32,64,64,32,32],
[ 0,32,64,64,32,32],*/
[16, 0, 32, 32, 16, 32],
[16, 16, 32, 32, 16, 16],
[0, 16, 32, 32, 16, 16],
[8, 0, 16, 16, 8, 16],
[8, 8, 16, 16, 8, 8],
[0, 8, 16, 16, 8, 8],
[4, 0, 8, 8, 4, 8],
[4, 4, 8, 8, 4, 4],
[0, 4, 8, 8, 4, 4],
[2, 0, 4, 4, 2, 4],
[2, 2, 4, 4, 2, 2],
[0, 2, 4, 4, 2, 2],
[1, 0, 2, 2, 1, 2],
[1, 1, 2, 2, 1, 1],
[0, 1, 2, 2, 1, 1],
],
p = 0;
var id = ctx.createImageData(1, 1);
var d = id.data;
d[3] = 255;
window.addEventListener('resize', resize);
var to;
var dr = false;
calcC();
resize();
function resize() {
WIDTH = canvas.width = window.innerWidth;
HEIGHT = canvas.height = window.innerHeight;
init();
}
function init() {
p = 0;
x = 0;
y = 0;
cancelAnimationFrame(to);
run();
};
function run() {
var t = Date.now();
while (pass[p]) {
if (dr || Date.now() - t > 300) {
dr = false;
to = requestAnimationFrame(run, 0);
break;
} else
loop();
}
}
function loop() {
draw();
x += pass[p][2];
if (x > WIDTH) {
x = pass[p][0] - pass[p][2];
y += pass[p][3];
if (y > HEIGHT) {
dr = true;
if (pass[++p])
y = pass[p][1] - pass[p][3];
}
}
}
function draw() {
green = ing;
//var cR = (x-WIDTH/2) / scale;
//var cI = (y-HEIGHT/2) / scale;
var zR = (x - WIDTH / 2) / scale;
var zI = (y - HEIGHT / 2) / scale;
//julia:
//cR = -.8;
//cI = .2;
var zR2;
var zI2;
for (var i = 0; i < ing; i++) {
zR2 = zR * zR;
zI2 = zI * zI;
zI = 2 * zR * zI + cI;
zR = zR2 - zI2 + cR;
if (zR2 + zI2 > 4) {
break;
}
}
s = "hsl(" + ~~(i * 360 / ing) + ", 100%," + Math.min(50, i * 500 / ing) + "%)";
ctx.fillStyle = s;
ctx.fillRect(x, y, pass[p][4], pass[p][5]);
//ctx.fillRect(x, y,1,1);
/*d[0] = ~~Math.min(255,i*500/ing);
ctx.putImageData( id, x, y ); */
}
html5画分形图形,HTML5/Canvas 可在线调整的朱丽叶分形图相关推荐
- html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
- html5画电池状态,HTML5的一个显示电池状态的API简介
这篇文章主要介绍了HTML5的一个显示电池状态的API简介,由Mozilla设计,具体的设备和浏览器支持情况还要通过检测才能确定,需要的朋友可以参考下 移动设备的份额在网络流量中在大量增长,其所贡献的 ...
- html5画安卓机器人,HTML5用户笔画形状检测机器人
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas = Snap('#svg-canvas'); var card = $('#svg-c ...
- 基于规则的分形图形生成方法
基于规则的分形图形生成方法 摘要:本文先对分形理论的简要介绍,随后字符串替换算法,Lindermayer系统画图元部分规则描述及其实现三个方面详细地阐述了L系统的分形图形生成方法,还给出了生成图形算法 ...
- html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- html5基础入门教程之canvas绘制图形
moveTo(x,y) moveTo()方法用于定位绘画的位置,即将点移动到参数x,y所指定的坐标位置. canvas初始化或者调用了beginPath()方法时,绘画开始的位置即原点(0,0),使用 ...
- [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长.因为就在最近,Adobe宣布Flash将不再支持移动设备.这意味着,Adobe自身 ...
- html5学习笔记---03. Canvas简介,Canvas的使用方法
2013/6/10 03. Canvas简介 a.创梦技术qq交流群:CreDream:251572072 ------------------------- a.Canvas 元素是HTML5的新元 ...
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长.因为就在最近,Adobe宣布Flash将不再支持移动设备.这意味着,Adobe自身 ...
最新文章
- 2021年大数据Kafka(八):Kafka如何保证数据不丢失
- iOS 模糊效果相关
- 115页Slides带你领略深度生成模型全貌(附PPT)
- python 类属性及限制
- k8s实践7:ipvs结合iptables使用过程分析
- 利用奇异值分解(SVD)简化数据
- 注入安卓进程,并hook java世界的方法
- 解决go项目报错:fatal: could not read Username for ‘https://gitee.com‘: terminal prompts disabled
- 学习设计模式 - 六大基本原则之接口隔离原则
- Java学习——继承和多态
- java calendar clear_java.util.Calendar clear()方法
- Git Cheat sheet
- 最近两个星期,机器经常卡死,难道是内存用光了?
- 基于node.js的网上书店系统的设计与实现.rar(项目源码+论文)(开发文档+nodejs配置+安装+运行教学.zip)
- 微信语音终于可以转发了,安卓用户优先!
- 教你如何搜索百度网盘的资源 百度网盘资源搜索方法!
- 什么是线速路由器 线速转发
- 计算机文本使用技巧,技巧:“文本恢复转换器”随附WORD的使用_计算机_IT /计算机_数据的基本知识...
- linux 深度 crossover,在Deepin V20(UOS)下使用crossover安装Kt交易师的方法
- 蓝桥杯算法提高 小写转换为大写
热门文章
- 区块链论语:公链可能是永无止息的战争
- CEC2017:鱼鹰优化算法(Osprey optimization algorithm,OOA)求解cec2017(提供MATLAB代码)
- 面向对象中OOA, OOD 和OOP的区别
- Asce‘s Summer Ranking No.11
- win10 win7 截图快捷键
- AIDATANG_1505ZH:一种用于深度学习的大规模汉语语音语料库
- 从一个实际问题来入门数据分析(一)
- 【数据埋点】主流埋点方式了解
- 利用 Python 爬取了 13966 条运维招聘信息,我得出了哪些结论?
- ASMS数据库数据初始化