【Canvas】js用Canvas绘制阴阳太极图动画效果
学习JavaScript是否兴趣缺缺，那就需要来一个兴趣学习，问一下有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，这里有一个例子，如何用canvas画阴阳太极图动图效果，接下来开始讲，边学边做。
1. 设计页面
首先，做好一个页面，开始写布局，页面源代码如下，看起来很简单吧
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>阴阳太极图 Yin and Yang Tai Chi Diagram</title><style>img{width: 300px;height: 300px;}</style></head><body><div style="padding:20px 0; text-align: center;"><div><img id="img1"></canvas></div><div style="padding-top: 20px;"><input type="range" max="360" min="1" id="range1" value="1"/><label id="speed1"></label></div></div><script type="module">//引入模块import YinAndYangTaiChiDiagram from './yin_and_yang_tai_chi_diagram.js'window.onload=()=>{//...此处省略加载脚本}</script></body>
</html>
2. 加载脚本
接下来，页面的加载脚本像这样写的，代码如下，应该看得明白吧
const { img1, range1, speed1 } = ((...args)=>{let e = {};args.forEach(a=>e[a]=document.getElementById(a));return e;
})('img1','range1','speed1');
//新建模块对象
let yytcd = new YinAndYangTaiChiDiagram();
//更新滑块的显示数据
const showSpeed = (value)=>{speed1.innerText = `${value}周/3s`;yytcd.speed=value*360;//调整速度
};
//当滑块滑动改变时，更新显示
range1.onchange = (e) => {const { value } = e.target;showSpeed(value);
};
showSpeed(1);
//调用对象的开始动画
yytcd.start(img1,window);
3. 实现模块
发现了吗，有个引用的模块yin_and_yang_tai_chi_diagram.js文件是没有的，需要自己去写一个，这时候要复杂一点，代码并不多
1. 初始化
先实现初始化的逻辑方法init()，代码如下，是绘制一个阴阳图，很简单吧
export default class YinAndYangTaiChiDiagram{speed = 360;//自转初速度constructor(){}//这里实现初始化，会返回一个绘制好的太极图，图像数据是base64格式的#init = (size,window) => {const { document } = window;let canv1 = document.createElement('canvas');canv1.width = size;//图像大小canv1.height = size;const ctx = canv1.getContext('2d');//画鱼
【Canvas】js用Canvas绘制阴阳太极图动画效果相关推荐
- 神奇的canvas——点与线绘制的绚丽动画效果
代码地址如下: http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效 ...
- 利用canvas绘制的拓扑动画效果
展示效果网址 reloadimage(callback){let imgArrs = [];this.imgArray.forEach((img,index,arrs)=>{imgArrs[in ...
- flash图片如何镜像翻转_在canvas上实现元素图片镜像翻转动画效果的方法
这篇文章主要介绍了在canvas上实现元素图片镜像翻转动画效果的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧! 一.Canvas图片水平镜像翻转效果预览 ...
- python太极代码_Python turtle绘制阴阳太极图代码解析
本文详细分析如何使用python turtle绘制阴阳太极图,先来分解这个图形,图片中有四种颜色,每条曲线上的箭头表示乌龟移动的方向,首先从中心画一个半圆(红线),以红线所示圆的直径作半径画一个校园, ...
- 用计算机画小鸡,flash动画设计教程：5.17——如何演示绘制小鸡的动画效果.doc...
Flash cs3仿真艺术设计5.17:如何演示绘制小鸡的动画效果 本例为Flash CS3仿真艺术设计系列教程,在上一课中我们学习了如何正确制作人物动作的预测,在这一课中我们将学习如何演示绘制小鸡的 ...
- html实现颜料效果,JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: JS canvas标签制作色相球 var canvas,ctx, ...
- 前端实现图片快速反转替换_在canvas上实现元素图片镜像翻转动画效果的方法
一.Canvas图片水平镜像翻转效果预览 demo页面中点击图片动画效果可见. 二.Canvas上实现图片镜像翻转的实现 CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转, ...
- js实现3d标签云tag动画效果js特效代码
下载地址JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时,当前标签静止,移出恢复滚动效果.tagcloud({ selector: ".tagcloud", //元素选择 ...
- 【前端】使用wow.js这个插件（实现页面动画效果），提高前端开发效率。
1.简介 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画. wow.js 依赖 animate.css,所以它支持 animate.css 多达 ...
最新文章
- python实现字符串中中文在前，数字在后且按从小到大排序
- python中requests.session的妙用
- UA MATH565C 随机微分方程III Ito积分简介
- 【机器学习基础】XGBoost、LightGBM与CatBoost算法对比与调参
- Tarjan水题系列(2):HNOI2012 矿场搭建
- 前端新手程序员不知道的 20个小技巧
- python实现： protobuf解释器
- python 清华镜像pip install
- Jquery 1.4.2 animate的BUG
- Google不要成为在垃圾桶里翻扒的猫
- 凯恩帝k1000ti参数设置_凯恩帝数控怎么修改参数
- 计算机不识别加密狗,用友加密狗识别不到_电脑无法识别用友软件加密狗
- Doxyfile 生成CHM
- Lync Server 2013 标准版的DNS和端口要求
- 帝都机器人便利店_我把北京80%的便利店吃了个遍！吐血整理出这份帝都便利店大攻略！...
- 软件工程专业毕业计算机水平,软件工程专业很“霸气”，不管985还是“二本”，毕业几乎都高薪就业...
- [软考]项目目标VS项目基准
- 不吸电子烟也请别吸电子咖啡！我们向雪加电子咖啡发起了挑战
- scipy.sparse学习
- 小视频如何消重 视频剪切后md5值变了吗
热门文章