逐帧绘制毕达哥拉斯树

最近有点闲，于是就整点活，做了个逐帧绘制的毕达哥拉斯树。有利于你们理解递龟和异步的机制(￣▽￣)／.

下面是代码:

<html><body><canvas id="canvas"></canvas><script>var canvas = document.getElementById("canvas");var cavWidth = document.body.offsetWidth;var cavHeight = document.body.offsetHeight||800;canvas.setAttribute("width",cavWidth);canvas.setAttribute("height",cavHeight);var context = canvas.getContext("2d");drawImg(context);function sleep(time){return new Promise(function(rs,rj){setTimeout(rs,time);});}async function drawImg(cont){//默认的背景cont.save();//入栈上下文cont.translate(800,500);//移动坐标系，也就是初始绘制位置async function creat_rect(w){await sleep(1);cont.fillStyle="RGB(230,"+(200+parseInt(Math.random()*56))+","+(55+w*2)+")";cont.fillRect(0,0,w,w);if(w<2){return 0;}//宽度小于2像素停止//右边绘制cont.save();cont.rotate(37*2*Math.PI/360);cont.translate(0,-w/5*3-w/5*4);await creat_rect(w*4/5);cont.restore();       //左边绘制cont.save();cont.rotate(-53*2*Math.PI/360);cont.translate(0,-w/5*3);await creat_rect(w*3/5);cont.restore();                       }await creat_rect(100);console.log("done");//树绘制完成cont.restore();//弹出上下文，回到初始状态cont.clearRect(0,0,cavWidth,cavHeight);//清除区域内所有的东西，以便下次绘制drawImg(cont);}</script></body>
</html>

做出来哄女朋友开心也挺好哒(｀・ω・´)

逐帧绘制毕达哥拉斯树相关推荐

编程示例：在H5画布上绘制毕达哥拉斯树
编程示例:在H5画布上绘制毕达哥拉斯树 --------------------------绘制毕达哥拉斯的树形图案 04-25 function draw_tree() { draw_squa ...
html5 canvas绘制树叶,使用HTML5 Canvas绘制毕达哥拉斯树
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 { "use strict"; const canvas = document.quer ...
安卓学习笔记33：实现逐帧动画
文章目录一.逐帧动画 (一)逐帧动画概念 (二)逐帧动画实现方式二.利用动画资源文件实现逐帧动画 - 功夫熊猫 (一)运行效果 (二)涉及知识点 (三)实现步骤 1.创建安卓应用[PandaAni ...
逐帧动画和补间动画的区别于各自的优缺点
帧动画: 逐帧动画是在时间帧上逐帧绘制帧内容,由于是一帧一帧的画,所以逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容. 由于逐帧动画的帧序列内容不一样,不仅增加制作负担而且最终输出的文件量也 ...
iOS 动画原理与实现--帧动画、逐帧动画、CALayer
这篇文章不会教大家如何实现一个具体的动画效果,我会从动画的本质出发,来说说 iOS 动画的原理与实现方式. 什么是动画动画,顾名思义,就是能"动"的画. 人的眼睛对图像有短暂的记 ...
Shader山下（三）逐帧动画
逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在"连续的关键帧"中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画. 例如下面这 ...
八年级使用计算机的教案,苏科版信息技术八年级1.2.2《用计算机制作逐帧动画》教案1.doc...
苏科版信息技术八年级1.2.2<用计算机制作逐帧动画>教案1.doc 文档编号:744523 文档页数:4 上传时间: 2019-09-18 文档级别: 文档类型:doc 文档大小:1.3 ...
java实现逐帧图片_java – 如何逐帧读取视频？
我想逐帧读取 java8-64bit中的Mp4文件,并将每个帧作为jpg写入我的硬盘.我的第一次尝试是使用 JavaFX 2.2媒体播放器播放该文件在View组件上.我想也许会有一个选项来注册一个观 ...
【逐帧分析】《黑神话：悟空》gameplay相关的技术和调整细节整理
一些约定俗成: 视角是战斗策划,稍微懂一点客户端的视角,有些问题会带着说一下,因为是黑盒所以估计有些东西会有误判,但原理应该差不离: 帧数的描述基于30帧/秒: 没经历过深度的开荒ue4项目,所以里面 ...

逐帧绘制毕达哥拉斯树

逐帧绘制毕达哥拉斯树

逐帧绘制毕达哥拉斯树相关推荐

最新文章

热门文章