js+canvas绘制360加速球
广告—:工作室
先给大家看几个效果图。(这里录制的gif软件有瑕疵,会有间隔,实际上是很流畅的)
第一张,因为我是衔接上一个的正弦图像的例子做的。所以直接在上面更改实现的。本想这样可以实现水波流动的特效,但是正弦图像的绘制方式导致它不能填充,(可以去看看上上篇正弦图像的实现),所以喽,这是失败的案例1。
然后来看第二张,其实就是平滑的上升。没有什么特别之处,
接着是最后一张,最后一张是使用三次贝塞尔曲线绘制的。其实,上面的水波是会动的,只不过动的幅度有点小。
总的来说,其实我这是未成功的案例。最好的应试能让水波滚动。我尝试着去动态移动贝塞尔曲线的位置,但是这样的效果并不好。先分析上来看看有没有大牛提供一些意见。底下我再去思考思考,看看有没有其他方式去实现。
然后是 上第三张gif的代码
只上传js了
var paint, r;
var width, height;
var j = 0, c = 0,length=0;
/*程序入口*/
function main() {var canvas1 = document.getElementById("canvas1");paint = canvas1.getContext("2d");width = paint.canvas.width;height = paint.canvas.height;r = width / 2;j = -r;start();setInterval(start, 50);
}/*开始进行清除和绘制*/
function start() {paint.clearRect(0, 0, width, height);drawArc();mathR();paint.restore();
}/*绘制一个外层的圆*/
function drawArc() {paint.save();paint.translate(r, r);paint.beginPath();paint.arc(0, 0, r, 0, 2 * Math.PI, false);paint.stroke();
}/*计算圆和内部水波的偏移量,并赋给drawSin()长度*/
function mathR() {/*控制上下移动*/j++;c++;if (j == r) {j = -r;c = 0;}/*变化正弦曲线的左右长度*/length = Math.sqrt(r * r - j * j);drawSin(j);/*绘制加载百分比*/paint.beginPath();paint.fillStyle = "#ff0000";paint.font = 40 + "px Arial";paint.textAlign = 'center';paint.fillText(c * 100 / (2 * r) + "%", 0, 0);/*计算角度值,绘制加载中颜色*/var rad = Math.asin(Math.abs(j) / r);paint.beginPath();paint.fillStyle = "#66ccff";paint.globalAlpha = 0.3;if (j > 0) {paint.arc(0, 0, r, -rad, Math.PI + rad, false);} else {paint.arc(0, 0, r, rad, Math.PI - rad, false);}paint.fill();
}/*绘制贝塞尔曲线,并且长度和位置可变*/
function drawSin(h) {paint.fillStyle = "#66ccff";paint.globalAlpha = 0.3;paint.beginPath();paint.moveTo(-length,-h);paint.bezierCurveTo(-length,-(h+50),length,-(h+50),length,-h);paint.fill();
}
还是注意一下。坐标轴是从上到下,(-,0,+)
觉得可以的话,就给个赞赏吧!
js+canvas绘制360加速球相关推荐
- android 自定义progressbar demo,Android自定义View――动态ProgressBar之模仿360加速球
在之前一篇文章中我们讲解了三种ProgressBar的做法,详见-><Android 自定义View--自定义ProgressBar >.这一节中我们模仿360加速球制作一个动态Pr ...
- PHP绘制99的棋盘,JS canvas绘制五子棋的棋盘
本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow ...
- D3.js + Canvas 绘制组织结构图
D3.js + Canvas 绘制组织结构图 使用 D3.js 默认的 svg 渲染 D3默认的树状图画图使用的是svg, 比如这个来自D3作者的例子: https://bl.ocks.org/mbo ...
- JS canvas绘制进度条
JS canvas绘制进度条 在前端开发中,我比较喜欢Cavans画布,通过Cavans可以绘制自己想要的东西,在早之前,我通过Canvas播放视频,绘制图片,绘制banner图等,复杂点可以用来做数 ...
- [MFC] WS_EX_LAYERED 实现透明异形窗口(酷狗歌词、360加速球、窗口边缘阴影)
关键词:WS_EX_LAYERED. UpdateLayeredWindow PC应用不少都有透明的异形窗口 比如以下程序的效果: 酷狗音乐播放器的歌词窗口(窗口除了歌词内容 其他都是透明的) 36 ...
- 360加速球 android,Android加速球、360加速球
先看效果图,这个加速球是动态的,并且当调用了myView.setRefresh(0.8F);方法后可以从当前值动态降到0再升到80%,期间可以看到颜色的变化. 源码: package com.ww.v ...
- js canvas绘制gif
效果大概这样 (图中用来播放的gif图来源于贴吧.如果你觉得侵权请私信我,我立刻下架) canvas这个东西只能渲染静态图片,不能渲染动图.即便我们用常规的加载图片的办法去绘制gif.我们也 ...
- Android绘图:360加速球
自定义View 主函数 布局 自定义View public class MyPathView extends View {private Paint mPaint;private Paint mPai ...
- html5 加速球 效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图(360加速球效果)...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
- js canvas绘制 一箭双心
使用面向对象方法编程: 博主最近做视频,无奈播放量惨淡,所以..... 一键三连视频私聊获得源码: "面向对象"劝学视频_哔哩哔哩_bilibili
最新文章
- 修复mysql编码错乱的数据_关于MySQL数据库编码修复相关问题
- squid 服务器的应用
- 猴子摘桃python代码_阿尔法python练习(4-6答案)
- RabbitMQ小结
- C++安全方向(三):3.2 单项散列函数的应用场景
- 基于PHP+MySQL图书管理系统的设计与实现
- app账号退不出去_2021个人所得税退税时间是什么时候?还可以退吗?
- 编译原理04-自顶向下语法分析方法
- 前后端分离和不分离图解
- 试题 基础练习 特殊回文数
- 那个80后程序员,7年创业4次,公司市值750亿美金,全球5万员工!
- 如何通俗的理解机器学习中的VC维、shatter和break point?
- 微信公众号下发红包 -- PHP
- Creating a ContextMenu on a ListView
- 王者荣耀转系统服务器繁忙,换手机党的福音,王者荣耀开启跨系统角色转移,但这些问题要注意...
- virgo tomcat
- 沪江日语百度云视频 0-n1百度云网盘视频的swf需要特定的播放器才能播放
- bzoj1925【sdoi2010】地精部落
- 基于svg开发绘制地铁图
- 翻录cda文件_翻录电视连续剧DVD并转换为单独的H.264 MP4文件