【Canvas】js用Canvas绘制漩涡螺旋图动画效果
学习JavaScript编程，会用Canvas画图吗，学会它，能画很多有趣的事物，可自由发挥想象，会发现图形学的美，收获很多，这里有一个例子，如何用canvas画漩涡螺旋图动图效果，接下来开始讲，边学边做。
文章目录
- 1. 设计页面
- 2. 加载脚本
- 3. 实现模块
- 4. 运行效果
1. 设计页面
首先，做好一个页面，开始写布局，页面源代码如下，看起来很简单吧
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>漩涡螺旋行图 Vortex 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 VortexDiagram from './vortex_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 vd = new VortexDiagram();
//更新滑块的显示数据
const showSpeed = (value)=>{speed1.innerText = `${value}周/3s`;vd.speed=value*360;//调整速度
};
//当滑块滑动改变时，更新显示
range1.onchange = (e) => {const { value } = e.target;showSpeed(value);
};
showSpeed(1);
//调用对象的开始动画
vd.start({img:img1,//...设置参数
},window);
3. 实现模块
发现了吗，有个引用的模块vortex_diagram.js文件是没有的，需要自己去写一个，这时候要复杂一点，代码不会太多
先实现初始化的逻辑方法init()，代码如下
export default class YinAndYangTaiChiDiagram{speed = 360;//自转初速度constructor(){}//这里实现初始化，先传入所需配置，会返回一个绘制好的螺旋图，图像数据是base64格式的#init = (config,window) => {const { document } = window;const size = config.size;//图像大小let canv1 = document.createElement('canvas');canv1.width = size;canv1.height = size;const ctx = canv1.getContext('2d');//中心点let center = {x: size*0.5,y: size*0.5,r: size*0.5,};//比如说，是一片叶子所占的角度let angle = config.angle;//小圆半径let r = size*0.25;//开始绘图 第一个圆ctx.beginPath();ctx.arc(Math.cos(0)*r + center.x,Math.sin(0)*r + center.y,r,0,Math.PI*2);ctx.fill();//余弦函数cosA：表示在一个直角三角形中，∠A（非直角）的邻边与三角形的斜边的比 let x = Math.cos(angle/180*Math.PI)*r + center.x;//正弦函数sinA：表示在一个直角三角形中，∠A（非直角）的对边与三角形的斜边的比let y = Math.sin(angle/180*Math.PI)*r + center.y;ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2);ctx.save();ctx.clip();ctx.clearRect(x-r,y-r,r*2,r*2);ctx.restore();//比如说，一片叶子 绘制好了 要导出图片let img = new Image();img.onload = () => {//将图片绕中心点旋转，转到360°为止，旋转一下就绘制一下for(let index=angle*2; index<360; index+=angle*2){ctx.save();ctx.translate(center.r,center.r);ctx.rotate(index/180*Math.PI);ctx.translate(-center.r,-center.r);ctx.drawImage(img,0,0,size,size);ctx.restore();}//螺旋图就这样绘制完了 可以导出图片let img2 = new Image();img2.onload = () => {//看着还不像吧，导出前，顺便裁剪一下，把不要的边沿部分去掉ctx.clearRect(0,0,size,size);ctx.beginPath();ctx.arc(center.x,center.y,center.r*0.94,0,Math.PI*2);ctx.clip();ctx.drawImage(img2,0,0,size,size);config.success(canv1.toDataURL())};//想反转，就翻转一下螺旋图if(config.isReverse){ctx.translate(size, 0);ctx.scale(-1, 1);}img2.src = canv1.toDataURL();};img.src = canv1.toDataURL();}//开始动画start(config,window){const img = config.img;//在开始动画的时候调用一下初始化方法this.#init({//...size:img.width,},window);//省略更多...}
}
【Canvas】js用Canvas绘制漩涡螺旋图动画效果相关推荐
- 用Canvas在SurfaceView上绘制一个雷达扫描动画
用Canvas在SurfaceView上绘制一个雷达扫描动画 目录 用Canvas在SurfaceView上绘制一个雷达扫描动画 目录 为什么选择SurfaceView 准备工作 构建MySurfac ...
- canvas实现阿里云云栖大会炫酷动画效果
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
- html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化 效果如下 简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
- JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果 说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...
- html5随鼠标移动动画,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化 效果如下 简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
- 用python画雨滴_Python使用Matplotlib实现雨点图动画效果的方法
本文实例讲述了Python使用Matplotlib实现雨点图动画效果的方法.分享给大家供大家参考,具体如下: 关键点 win10安装ffmpeg animation函数使用 update函数 win1 ...
- 用CAShapeLayer写股市K线图动画效果
用CAShapeLayer写股市K线图动画效果 说明 入市有风险,炒股需谨慎.(因项目需求,本人提供了写这种效果的源码) 效果 源码 // // ViewController.m // Path // ...
- 【Canvas】js用canvas绘制一个钟表时钟动画效果
学习JavaScript的看过来,有没有兴趣用Canvas画图呢,可以画很多有趣的事物,自由发挥想象,收获多多哦,旋转角度绘图这个重点掌握到了吗,这里有一个例子,如何用canvas画钟表时钟动图效果, ...
- H5 Canvas绘制圆形进度条动画效果
效果如图 效果比较简单 html结构部分 <canvas id="canvas" width="110" height="110"&g ...
最新文章
- 【西交ACM】100 A+B problem
- Spring如何加载XSD文件(org.xml.sax.SAXParseException: Failed to read schema document错误的解决方法)...
- C#中的Lock锁深入理解
- Redis内存回收策略
- mongodb php 删除,MongoDB / PHP：从数组中删除元素
- iPhone 6S三大性能实测
- 快手：今年下架抄袭、搬运内容的违规视频20316个
- git 提交代码的步骤
- 编码与调制（曼彻斯特编码、调制解调器等）
- mycat实例（1）
- MOSEK优化包的安装、使用及注册：以Matlab中的二次规划为例
- RFID医疗耗材柜管理系统-高值耗材管理系统-杭州东识科技
- HTML5+CSS3基础
- 从10个经典工业设计案例，来看什么是工业设计
- 真香！一行代码搞定微信支付回调
- PXE高效批量网络装机
- 综合练习Java算法
- 腾讯会议多开一个账号同时登陆手机和电脑
- 将中文括号变为英文括号
- 【愚公系列】2023年02月 WMS智能仓储系统-012.登录功能的实现
热门文章