html5圆形中心水,html5 canvas制作圆形水波进度条动画特效

本文介绍如何使用HTML5 Canvas创建一个圆形水波进度条动画效果。通过纯Canvas实现的水波纹进度条动画,支持通过拖动范围选择器设置水波纹的进度大小。代码中详细展示了画布、圆、Sin曲线等关键属性的设定及绘制函数,包括画圆、画Sin曲线、显示百分比文本等操作。最后,通过requestAnimationFrame实现实时渲染和动画效果。
摘要由CSDN通过智能技术生成

特效描述:html5 canvas制作 圆形水波 进度条动画特效。纯canvas制作的水波纹进度条动画,支持拖到设置水波进度条大小代码

代码结构

1. HTML代码

var canvas = document.getElementById('c');

var ctx = canvas.getContext('2d');

var range = document.getElementById('r');

//range控件信息

var rangeValue = range.value;

var nowRange = 0; //用于做一个临时的range

//画布属性

var mW = canvas.width = 250;

var mH = canvas.height = 250;

var lineWidth = 2;

//圆属性

var r = mH / 2; //圆心

var cR = r - 16 * lineWidth; //圆半径

//Sin 曲线属性

var sX = 0;

var sY = mH / 2;

var axisLength = mW; //轴长

var waveWidth = 0.015 ; //波浪宽度,数越小越宽

var waveHeight = 6; //波浪高度,数越大越高

var speed = 0.09; //波浪速度,数越大速度越快

var xOffset = 0; //波浪x偏移量

ctx.lin

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值