叁拾柒- JS 在 Canvas 上尝试分形图形 （一） 画了一个普通箱子图

最新推荐文章于 2022-02-07 17:58:46 发布
最新推荐文章于 2022-02-07 17:58:46 发布
阅读量594 收藏 6
点赞数 1
分类专栏： 三世书记录 文章标签： js html 几何学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BerryBC/article/details/104595472
版权

1。看到惊为天人的图形

我表哥在给我科普 分形的时候，发了一个视频给我看：
【PBS纪录片】寻找隐藏的维度【中英双字】
其中说到一个关于分型图形的：
就这个图
我忽然惊为天人！！
我觉得那人其实就是用了 LSD 才想出这种东西。
我懒得学数学，于是就用直接看看怎么画的。

结果发现，没有现成的教程。于是自己上网看。

2。H5 的 Canvas

我看过，比较熟的语言中，比较方便的就是 JS 了，直接画图的话，那用 Html 是方便的呀，而且 Html5 有 Canvas ，就它了！
看了教程觉得很容易啊！
W3school HTML 5 Canvas

2-1) 看文档的重要性

其实我到现在还是找不到 H5 的文档，如果各位知道哪里可以看到的话麻烦留意一下告诉我，反正我被那个 fillRect耍了一个小时。
我一直以为：

cxt.fillRect(0,0,150,75);
其中 0,0 是左上角的坐标
其中 150,74 是右下角的坐标


但！原来 150,75 其实是 width 以及 height！！

3。递归

因为我不是很熟其实分形是什么，只是看到科普文章里面只是说

“当你不断递归的时候，你就得到分型图形了！！”

于是我简单的写了个思路

let 第一个箱子=画布中间位置;
function 画下一层箱子(现在箱子的参数){
	let 现在箱子上面加个箱子=计算位置;
	let 现在箱子左面加个箱子=计算位置;
	let 现在箱子右面加个箱子=计算位置;
	let 现在箱子下面加个箱子=计算位置;
	
	画现在箱子上面的箱子();
	画现在箱子左面的箱子();
	画现在箱子右面的箱子();
	画现在箱子下面的箱子();
	
	画下一层箱子(上面的箱子);
	画下一层箱子(左面的箱子);
	画下一层箱子(右面的箱子);
	画下一层箱子(下面的箱子);
};
画下一层箱子(第一个箱子);

因为纯粹想看看会发生什么事，所以完全没有写重用、优化代码，得到结果如下：
就一个普通的图形

4。完整代码

<!--
 * @Descripttion: 尝试画分形图形
 * @Author: BerryBC
 * @Date: 2020-03-01 16:48:25
 * @LastEditors: BerryBC
 * @LastEditTime: 2020-03-01 17:22:43
 -->
<html>

<head>
    <meta charset="utf-8">
        <title>测试分形</title>
        <style>
            body {
                text-align: center;
                background-color: black;
            }
            
            .canFractal {
                background-color: rgb(243, 236, 253);
            }
        </style>
</head>

<body>
    <canvas id="canFractal" width="1300" height="900">绝望</canvas>
    <script>
        // 第一版
        let dblMX = 650;
        let dblMY = 450;

        let canF = document.getElementById("canFractal");
        let ctxDraw = canF.getContext("2d");
        let intMaxL = 80;
        let intMaxN = 8;
        let objRect = {
            top: dblMY - intMaxL / 2,
            bottom: dblMY + intMaxL / 2,
            left: dblMX - intMaxL / 2,
            right: dblMX + intMaxL / 2
        }

        // 0 是 上
        // 1 是 左
        // 2 是 下
        // 3 是 右
        function funDraw(intN, intL, objUpRect) {

            function forTest() {

                let intR = 0;
                let intG = 0;
                let intB = 0;
                intR = 10 - parseInt((Math.random()) * 9.9);
                intG = 10 - parseInt((Math.random()) * 9.9);
                intB = 10 - parseInt((Math.random()) * 9.9);
                ctxDraw.fillStyle = "#" + ((intR * 10 + intR) * 10000 + (intG * 10 + intG) * 100 + (intB * 10 + intB)).toString();
                ctxDraw.fillRect(100, 100, 200, 300);
            };


            intL = intL * intN / intMaxN;

            let intR = 0;
            let intG = 0;
            let intB = 0;
            let dblXRand = (objUpRect.right - objUpRect.left - intL) * Math.random();
            let dblYRand = (objUpRect.bottom - objUpRect.top - intL) * Math.random();

            let objRect0 = {
                top: objUpRect.top - intL,
                bottom: objUpRect.top,
                left: objUpRect.left + dblXRand,
                right: objUpRect.left + dblXRand + intL
            };
            let objRect2 = {
                top: objUpRect.bottom,
                bottom: objUpRect.bottom + intL,
                left: objUpRect.left + dblXRand,
                right: objUpRect.left + dblXRand + intL
            };
            let objRect1 = {
                top: objUpRect.top + dblYRand,
                bottom: objUpRect.top + dblYRand + intL,
                left: objUpRect.left - intL,
                right: objUpRect.left
            };
            let objRect3 = {
                top: objUpRect.top + dblYRand,
                bottom: objUpRect.top + dblYRand + intL,
                left: objUpRect.right,
                right: objUpRect.right + intL
            };

            intR = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            intG = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            intB = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            ctxDraw.fillStyle = "#" + ((intR * 10 + intR) * 10000 + (intG * 10 + intG) * 100 + (intB * 10 + intB)).toString();
            ctxDraw.fillRect(objRect0.left, objRect0.top, objRect0.right - objRect0.left, objRect0.bottom - objRect0.top);
            intR = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            intG = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            intB = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            ctxDraw.fillStyle = "#" + ((intR * 10 + intR) * 10000 + (intG * 10 + intG) * 100 + (intB * 10 + intB)).toString();
            ctxDraw.fillRect(objRect1.left, objRect1.top, objRect1.right - objRect1.left, objRect1.bottom - objRect1.top);
            intR = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            intG = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            intB = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            ctxDraw.fillStyle = "#" + ((intR * 10 + intR) * 10000 + (intG * 10 + intG) * 100 + (intB * 10 + intB)).toString();
            ctxDraw.fillRect(objRect2.left, objRect2.top, objRect2.right - objRect2.left, objRect2.bottom - objRect2.top);
            intR = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            intG = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            intB = 10 - parseInt((Math.random() * intL / intMaxL) * 9.9);
            ctxDraw.fillStyle = "#" + ((intR * 10 + intR) * 10000 + (intG * 10 + intG) * 100 + (intB * 10 + intB)).toString();
            ctxDraw.fillRect(objRect3.left, objRect3.top, objRect3.right - objRect3.left, objRect3.bottom - objRect3.top);

            intN--;
            if (intN > 0) {
                funDraw(intN, intL, objRect0);
                funDraw(intN, intL, objRect1);
                funDraw(intN, intL, objRect2);
                funDraw(intN, intL, objRect3);
            };
        };
        ctxDraw.fillRect(objRect.left, objRect.top, objRect.right - objRect.left, objRect.bottom - objRect.top);
        funDraw(intMaxN, intMaxL, objRect);
    </script>

</body>

</html>
BerryBC
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript分形树
unirrrrr的博客
06-08 1589
参考博客：c++分形树绘制 js 利用canvas绘制直线、曲线 1、算法描述 假设A点坐标为(x,y)，B点坐标为(x0,y0)，C点坐标为(x1,y1)，D点坐标为(x2,y2)，α为主干和枝干的夹角（父枝干和子枝干的夹角），angle为当前要描绘的树干与x轴正方形的夹角（注意angle与α的关系），L为主干的长度。 初始状态下，angle=π/2。 实现的算法步骤： 1、画出...
matlab julia分形图,Three.js 朱丽亚集（Julia set）分形图案
weixin_29086203的博客
03-17 474
JavaScript语言：JaveScriptBabelCoffeeScript确定var container;var scene, camera, renderer;var material, shaderUniforms = {},shaderAttributes = {};var plane;var center = {cx: 0,cy: 0};var infoText = document...
html5画分形图形,HTML5/Canvas龙图分形自动绘制动画
weixin_42501119的博客
06-07 179
JavaScript语言：JaveScriptBabelCoffeeScript确定/* Canvas Setup */var canvas = document.createElement("canvas");document.body.appendChild(canvas);canvas.style.position = "absolute";canvas.style.left = 0;can...
html5画分形图形,HTML5/Canvas 可在线调整的朱丽叶分形图
weixin_39908082的博客
06-07 156
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.addEventListene...
如何用 canvas 画出分形图
奇舞周刊
11-23 864
前言分形是一门以非规则几何形态为研究对象的几何学，由曼德勃 罗（B.B.Mandelbrot）等人创立并命名。分形图从整体上看，是处处不规律的。但从局部观察，图形的规则性又是相同的，即具有...
vue-konva：Vue和Canvas-JavaScript库，用于使用Vue绘制复杂的画布图形
02-06
Vue Konva是一个JavaScript库，用于使用Vue绘制复杂的画布图形。 它提供了声明性和React性绑定。 所有vue-konva组件都对应于具有前缀“ v-”的同名Konva组件。 可用于Konva对象的所有参数都可以在config中作为...
react-native-sketch-canvas:一个通过在iOS和Android上触摸来进行绘图的React Native组件
04-28
一个通过在iOS和Android上触摸来进行绘图的React Native组件。 特征 支持iOS和Android 绘画时笔触的厚度和颜色是可变的。 可以一一撤消笔画。 可以将路径数据序列化为JSON。 因此，它可以同步其他设备或其他人并...
leaflet-markers-canvas:一个 Leaflet 插件，用于在画布而不是 DOM 中渲染许多标记
05-30
传单标记画布一个 Leaflet 插件，用于在画布而不是 DOM 中呈现许多标记。 这是 Eugene Voynov 对的完全重写。 感谢您的启发。演示这是 10000 个标记的，显示在一个画布中。用法依赖关系和必须在全球范围内可用或作为...
canvas-spreadsheet:一个基于Canvas API的高性能在线电子表格JS库
08-04
基于Canvas的一款高性能在线编辑组件，拥有仿Excel的复制粘贴、拖拽柄、实时编辑、6种不同数据类型、基本数据校验等功能 Examples Please try it on . Screenshot Feature 支持（文本、数字、电话、邮箱、日期、...
Canvas:一个在 Javascript 画布上绘制的小应用程序
07-10
Canvas是HTML5中引入的一个强大的绘图工具，它允许开发者通过JavaScript在网页上进行像素级别的图形操作。这个小应用程序正是利用了Canvas的功能，为用户提供了一种动态、交互式的绘图体验。JavaScript作为Web开发中...
简单分形几何图形的绘制
06-29
1.巩固图形学中关于分形曲线的绘制算法<br>2.编写程序实现简单Koch曲线及其派生曲线的算法<br>3．利用Koch曲线或派上曲线生成复杂图形，如雪花生成<br>
javascript canvas生成分形图练习
cc_fys的博客
08-27 1770
html5 javascript canvas生成分形图 简单的分形图，类似于二叉树 一颗数有两个对称分支，然后每个分支又可以继续生长。用一个数组记录每一层的信息，然后一层一层迭代，每迭代一次树枝就增加一层。 可以控制迭代次数，初始树枝长度 ，长度比例等。
canvas画不规则多边形_Canvas 不规则方块分形图
weixin_34521351的博客
12-29 570
JavaScript语言：JaveScriptBabelCoffeeScript确定var c = document.getElementById('canv');var $ = c.getContext('2d');var w = c.width = window.innerWidth;var h = c.height = window.innerHeight;var tile = (funct...
canvas绘制立方体盒子
风如白话的博客
02-07 1106
基于canvas绘制立方体 length: 长 width: 宽 height: 高 id: canvas元素id color: 盒子颜色 // 基于canvas生成立方体 export function generateCubeByCanvas(length = 0, width = 0, height = 0, id = '', color) { const canvas = document.getElementById(id) const ctx = canvas.getConte
在canvas(画布）上绘制一个矩形盒子并使用按键移动这个盒子
可爱又迷人的反派少女
07-21 1872
思路 1、在画布上创建一个2d画笔，并用这个画笔在画布上绘制一个矩形。 2、设置一个边界判断使这个盒子不能移出画布之外，只能在画布中移动。 注意： 不能直接在style中设置canvas的大小 直接设置大小的话，虽然改变了大小,但是图像也被拉伸变形。 特殊键值： 左:37 上:38 右:39 下：40 代码分解 body部分 设置画布大小 <canvas id="can" width="500" height="500"></canvas> css样式部分 为画布设置一
C#入门学习-----推箱子游戏（WPF技术实现）
y38701522的专栏
12-15 981
编译平台：VS2008 + .Net Framework 3.5         语言： C# 使用工具：Expression Design 4                     Expression Blend     3、实现游戏用户界面 尽管程序员可以使用VS编写XAML代码的方式来构造用户界面，但是对于有设计爱好的用户来说，使用类似Photoshop一样的E
133行代码实现质感地形(js,基于canvas)
fendouzhe123的专栏
05-20 2175
写于2014年5月5日 作为程序员，
HTML5画布树分形
limeiyans喜欢编程的那些事
01-18 1278
说明:刷新页面来查看不同的随机树 body { margin: 0px; padding: 0px; } function drawBranches(startX, startY, trunkWidth, level) { canvas = docum
Canvas画板实现一个简单的球在盒子内随机移动效果
sina_panda
10-26 5595
HTML5入门之Canvas：如何用Canvas画板实现一个简单的球在盒子内随机移动效果 作者：html5Game | 时间：2014-2-25 17:05:14 | [小  大] | 来源：HTML5 | 阅读：12457 |   评论： 0 |  收藏 HTML5入门Canvas画板实现球简单盒子随机移动    [摘要]： HTML5提供了一个非常好的标签
ec-canvas 渲染的canvas 生成一个图片
最新发布
12-06
要将 ec-canvas 渲染的 canvas 生成一个图片，可以使用 canvas.toTempFilePath() 方法。具体步骤如下： 1. 获取 ec-canvas 组件的 canvas-id，例如 "mychart-line"。 2. 在页面的 js 文件中，使用 wx.createSelectorQuery() 方法获取到该 canvas 的节点信息。 3. 使用节点信息中的 canvas 节点调用 canvas.toTempFilePath() 方法，生成图片文件。 4. 将生成的图片文件路径传递给页面的 data 中的变量，以便在页面中显示图片。 下面是一个示例代码： ```javascript // 获取 canvas 节点信息 const query = wx.createSelectorQuery() query.select('#mychart-line').fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') // 绘制图表 // ... // 生成图片文件 canvas.toTempFilePath({ success: (res) => { // 将生成的图片文件路径传递给页面的 data 中的变量 this.setData({ chartImage: res.tempFilePath }) } }) }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值