js+canvas绘制360加速球
来源:互联网 发布:知耻近乎勇的意思 编辑:程序博客网 时间:2024/06/05 22:43
先给大家看几个效果图。(这里录制的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,+)
0 0
- js+canvas绘制360加速球
- 【JS】使用canvas绘制动画-旋转风车加速减速启动停止
- JS | canvas 绘制多图
- JS-canvas 渐变 绘制圆
- JS canvas绘制能拖动和缩放的球
- 使用canvas绘制股票图【envision.js】
- 网页,html5,canvas,js 动态绘制柱形图
- canvas+js绘制饼状统计图
- canvas:利用js遍历绘制七巧板
- js使用canvas绘制高清图片
- js HTML5 Canvas绘制转盘抽奖
- canvas绘制
- Canvas绘制
- [HTML5].Canvas.easel.js.arc.arcTo 绘制弧线
- 【js学习笔记-113】------<canvas>绘制和填充曲线
- 分别利用html+js和canvas绘制时钟
- HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形
- js+canvas绘制QQ下拉刷新贝塞尔曲线效果
- spss 构建决策树 树形图 正在处理不显示问题
- PHP——.json文件(读&写)
- 关于接入新浪微博第三方登录
- js 时间比较
- pid 算法 第一个微分问题
- js+canvas绘制360加速球
- 2--百度2017春招笔试真题编程题集合--度度熊回家 (Python)
- 数据库冷迁移和热迁移方法案例
- 使用@ControllerAdvice及@ExceptionHandler(value = Exception.class)全局异常处理
- Apereo CAS 5.0.X 认证
- POI2010 BZOJ2079 Guilds
- Keras 训练时不用将数据全部加入内存
- 专访时尚女人的缔造者——兆衡老师,精致是一种生活态度的体现
- JVM中的哪些内存总和受到操作系统进程的最大内存限制?