canvas 画一条波浪线 进度条
2024-05-08 00:52:08
前言： 记得刚接触Web的时候， 老板需要画一个有波浪线的进度球； 那个时候无赖不熟悉canvas; 所以这个功能没有满足; 今天刚好有时间来满足下心愿
第一步 我们先实现一个波浪
这里核心就用到了一个 二维的 贝塞尔曲线： quadraticCurveTo
drawWave() {this.ctx.beginPath()//线条起点this.ctx.moveTo(0, this.canvasCenter.y); //宽高this.ctx.setStrokeStyle("#002ae6") //颜色this.ctx.setLineWidth(1)for (let i = 0; i < this.step * 2; i++) {if (i % 2 == 0) {this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2, this.canvasCenter.y + this.stepWaveHeight, this.stepWave * (i + 1), this.canvasCenter.y)} else {this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2, this.canvasCenter.y - this.stepWaveHeight, this.stepWave * (i + 1), this.canvasCenter.y)}}//右下角的点this.ctx.lineTo(this.canvasWidth, this.canvasHeight)//左下角的点this.ctx.lineTo(0, this.canvasHeight)//闭合点this.ctx.closePath()//渐变色let grad = this.ctx.createLinearGradient(0, 0, 0, this.canvasHeight);grad.addColorStop(0, '#1e92ea')grad.addColorStop(1, '#2C405A')// this.ctx.setFillStyle('#3cee06')this.ctx.setFillStyle(grad)this.ctx.fill()this.ctx.stroke()this.ctx.draw() },完整的脚本：
<template><view class="canvas-view"><canvas :style="{'width': width + 'rpx','height': height + 'rpx','backgroundColor': '#d2d8d2'}"canvas-id="firstCanvas" id="firstCanvas"></canvas></view> </template><script>export default {data() {return {ctx: null,width: 600,height: 400,step: 2.5,stepHeight: -20,}},mounted() {this.ctx = uni.createCanvasContext('firstCanvas', this)//this.drawWave()this.drawWave()},computed: {canvasWidth() {return uni.upx2px(this.width)},canvasHeight() {return uni.upx2px(this.height)},stepWave() {return uni.upx2px(this.canvasWidth) / this.step},stepWaveHeight() {return uni.upx2px(this.stepHeight)},canvasCenter() {return {x: this.canvasWidth / 2,y: this.canvasHeight / 2}}},methods: {drawWave() {this.ctx.beginPath()//线条起点this.ctx.moveTo(0, this.canvasCenter.y); //宽高this.ctx.setStrokeStyle("#002ae6") //颜色this.ctx.setLineWidth(1) for (let i = 0; i < this.step * 2; i++) {if (i % 2 == 0) {this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2, this.canvasCenter.y + this.stepWaveHeight, this.stepWave * (i + 1), this.canvasCenter.y)} else {this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2, this.canvasCenter.y - this.stepWaveHeight, this.stepWave * (i + 1), this.canvasCenter.y)}}this.ctx.lineTo(this.canvasWidth, this.canvasHeight)this.ctx.lineTo(0, this.canvasHeight)this.ctx.closePath()let grad = this.ctx.createLinearGradient(0, 0, 0, this.canvasHeight);grad.addColorStop(0, '#1e92ea')grad.addColorStop(1, '#2C405A')// this.ctx.setFillStyle('#3cee06')this.ctx.setFillStyle(grad)this.ctx.fill()this.ctx.stroke()this.ctx.draw()},}} </script><style lang="scss" scoped>.canvas-view {} </style>引入我们的脚本
<template><view class="content"><canvas-view></canvas-view></view> </template>
第二步 我们让波浪 （浪）动起来 （花式玩法）
动起来的核心就是： 本身波浪变长一些，刚开始的时候，开始位置 是一个负的值，随着时间 叠加；然后在一个波浪 周期位置 复位一下就好了
后面还有几个 花式玩法： 也就是动态改变波浪 高度这些值；有兴趣的还可以改变下波浪的长度
//计算位移 波浪高度的值 moveWave() {let offset = -this.stepWave * 2setInterval(() => {offset++if (offset >= 0) {offset = -this.stepWave * 2}if (this.stepHeight > -10) {this.trigger = true}if (this.stepHeight < -50) {this.trigger = false}if (this.trigger) {this.stepHeight -= 0.2} else {this.stepHeight += 0.2}this.drawWave(offset)}, 10) },完整脚本：
<template><view class="canvas-view"><canvas :style="{'width': width + 'rpx','height': height + 'rpx','backgroundColor': '#d2d8d2'}"canvas-id="firstCanvas" id="firstCanvas"></canvas></view> </template><script>export default {data() {return {ctx: null,width: 600,height: 400,step: 2,stepHeight: -60,trigger: true}},mounted() {this.ctx = uni.createCanvasContext('firstCanvas', this)//this.drawWave()//this.drawWave()this.moveWave()},computed: {canvasWidth() {return uni.upx2px(this.width)},canvasHeight() {return uni.upx2px(this.height)},stepWave() {return uni.upx2px(this.canvasWidth) / this.step},stepWaveHeight() {return uni.upx2px(this.stepHeight)},canvasCenter() {return {x: this.canvasWidth / 2,y: this.canvasHeight / 2}}},methods: {//计算位移 波浪高度的值moveWave() {let offset = -this.stepWave * 2setInterval(() => {offset++if (offset >= 0) {offset = -this.stepWave * 2}if (this.stepHeight > -10) {this.trigger = true}if (this.stepHeight < -50) {this.trigger = false}if (this.trigger) {this.stepHeight -= 0.2} else {this.stepHeight += 0.2}this.drawWave(offset)}, 10)},drawWave(offset) {this.ctx.beginPath()//线条起点this.ctx.moveTo(0 + offset, this.canvasCenter.y); //宽高this.ctx.setStrokeStyle("#002ae6") //颜色this.ctx.setLineWidth(1)for (let i = 0; i < this.step * 3; i++) {if (i % 2 == 0) {this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2 + offset, this.canvasCenter.y + this.stepWaveHeight, this.stepWave * (i + 1) + offset, this.canvasCenter.y)} else {this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2 + offset, this.canvasCenter.y - this.stepWaveHeight, this.stepWave * (i + 1) + offset, this.canvasCenter.y)}}this.ctx.lineTo(this.stepWave * (this.step * 2 + 3) + offset, this.canvasHeight)this.ctx.lineTo(0 + offset, this.canvasHeight)this.ctx.closePath()let grad = this.ctx.createLinearGradient(0, 0, 0, this.canvasHeight);grad.addColorStop(0, '#1e92ea')grad.addColorStop(1, '#2C405A')// this.ctx.setFillStyle('#3cee06')this.ctx.setFillStyle(grad)this.ctx.fill()this.ctx.stroke()this.ctx.draw()},}} </script><style lang="scss" scoped>.canvas-view {} </style>
第三步 我们给波浪 加个遮罩
drawWave(offset) 整理
drawWave(offset) {// 遮罩开始this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);this.ctx.save();this.ctx.beginPath();this.ctx.fillStyle = '#d5ffc5'this.ctx.arc(this.canvasCenter.x, this.canvasCenter.y, 100, 0, Math.PI * 2, false);this.ctx.closePath();this.ctx.fill();// this.ctx.setStrokeStyle("#d5ffc5")// this.ctx.stroke();this.ctx.clip();//this.ctx.restore()// 遮罩结束this.ctx.beginPath()//线条起点this.ctx.moveTo(0 + offset, this.canvasCenter.y); //宽高// this.ctx.setStrokeStyle("#002ae6") //颜色this.ctx.setLineWidth(1)for (let i = 0; i < this.step * 3; i++) {if (i % 2 == 0) {this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2 + offset, this.canvasCenter.y + this.stepWaveHeight, this.stepWave * (i + 1) + offset, this.canvasCenter.y)} else {this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2 + offset, this.canvasCenter.y - this.stepWaveHeight, this.stepWave * (i + 1) + offset, this.canvasCenter.y)}}this.ctx.lineTo(this.stepWave * (this.step * 2 + 3) + offset, this.canvasHeight)this.ctx.lineTo(0 + offset, this.canvasHeight)this.ctx.closePath()let grad = this.ctx.createLinearGradient(0, 0, 0, this.canvasHeight);grad.addColorStop(0, '#1e92ea')grad.addColorStop(1, '#2C405A')// this.ctx.setFillStyle('#3cee06')this.ctx.setFillStyle(grad)this.ctx.fill()this.ctx.restore();//this.ctx.strokeStyle = "red"//this.ctx.stroke()this.ctx.draw() },完整脚本：
<template><view class="canvas-view"><canvas :style="{'width': width + 'rpx','height': height + 'rpx','backgroundColor': '#d2d8d2'}"canvas-id="firstCanvas" id="firstCanvas"></canvas></view> </template><script>export default {data() {return {ctx: null,width: 600,height: 400,step: 2,stepHeight: -60,trigger: true}},mounted() {this.ctx = uni.createCanvasContext('firstCanvas', this)//this.drawWave()//this.drawWave()this.moveWave()},computed: {canvasWidth() {return uni.upx2px(this.width)},canvasHeight() {return uni.upx2px(this.height)},stepWave() {return uni.upx2px(this.canvasWidth) / this.step},stepWaveHeight() {return uni.upx2px(this.stepHeight)},canvasCenter() {return {x: this.canvasWidth / 2,y: this.canvasHeight / 2}}},methods: {//计算位移 波浪高度的值moveWave() {let offset = -this.stepWave * 2setInterval(() => {offset++if (offset >= 0) {offset = -this.stepWave * 2}if (this.stepHeight > -10) {this.trigger = true}if (this.stepHeight < -50) {this.trigger = false}if (this.trigger) {this.stepHeight -= 0.2} else {this.stepHeight += 0.2}this.drawWave(offset)}, 10)},drawWave(offset) {// 遮罩开始this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);this.ctx.save();this.ctx.beginPath();this.ctx.fillStyle = '#d5ffc5'this.ctx.arc(this.canvasCenter.x, this.canvasCenter.y, 100, 0, Math.PI * 2, false);this.ctx.closePath();this.ctx.fill();// this.ctx.setStrokeStyle("#d5ffc5")// this.ctx.stroke();this.ctx.clip();//this.ctx.restore()// 遮罩结束this.ctx.beginPath()//线条起点this.ctx.moveTo(0 + offset, this.canvasCenter.y); //宽高// this.ctx.setStrokeStyle("#002ae6") //颜色this.ctx.setLineWidth(1)for (let i = 0; i < this.step * 3; i++) {if (i % 2 == 0) {this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2 + offset, this.canvasCenter.y + this.stepWaveHeight, this.stepWave * (i + 1) + offset, this.canvasCenter.y)} else {this.ctx.quadraticCurveTo(this.stepWave * (i) + this.stepWave / 2 + offset, this.canvasCenter.y - this.stepWaveHeight, this.stepWave * (i + 1) + offset, this.canvasCenter.y)}}this.ctx.lineTo(this.stepWave * (this.step * 2 + 3) + offset, this.canvasHeight)this.ctx.lineTo(0 + offset, this.canvasHeight)this.ctx.closePath()let grad = this.ctx.createLinearGradient(0, 0, 0, this.canvasHeight);grad.addColorStop(0, '#1e92ea')grad.addColorStop(1, '#2C405A')// this.ctx.setFillStyle('#3cee06')this.ctx.setFillStyle(grad)this.ctx.fill()this.ctx.restore();//this.ctx.strokeStyle = "red"//this.ctx.stroke()this.ctx.draw()},}} </script><style lang="scss" scoped>.canvas-view {} </style>
canvas 画一条波浪线 进度条相关推荐
- 2019-6-27-WPF-如何给定两个点画出一条波浪线
title author date CreateTime categories WPF 如何给定两个点画出一条波浪线 lindexi 2019-6-27 10:17:6 +0800 2019-6-26 ...
- 自定义圆形进度条 自定义倒计时进度条
自定义圆形进度条 自定义倒计时进度条 版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 此控件源码已开源到Github:https: ...
- Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能 前言 我在之前的博客里介绍过关于VideoPlayer的简单使用流程,之前一直想研究下videoPlayer中的使用进度条控制视频 ...
- android 进度条 代码,Android进度条ProgressBar的实现代码
ProgressBar进度条 当一个应用在后台执行时,前台界面不会有任何信息,这时,用户根本不知道程序是否在执行以及执行的进度等, 因此需要使用进度条来提示程序执行的进度. 而ProgressBar就 ...
- bootstrap 滚动 进度条_bootstrap动态进度条怎么搞
在本教程中,您将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前 ...
- Android自定义View之画圆环(进阶篇:圆形进度条)
前言: 如果你想读懂或者更好的理解本篇文章关于自定义圆环或圆弧的内容.请你务必提前阅读下Android自定义View之画圆环(手把手教你如何一步步画圆环).在这篇文章中,详细描述了最基本的自定义圆环的 ...
- android录音波浪动画_Android 自定义 view 实现波浪动画进度条
最近在做项目时需要实现这样一种动画,类似于波浪形的进度动画,粗略的看了一下,发现好像类似于正余弦曲线实现的,但是Android 没有相关的API,所以需要我们动手画出来,所以现在在此记录一下学习过程, ...
- android 圆形拖动条,Android圆形进度条自定义
自定义圆形进度条 示例.png 示例 (2).png 示例 (3).png 示例 (4).png 实现 override fun onSizeChanged(w: Int, h: Int, oldw: ...
- canvas画一个渐变色的环形进度环
» 介绍 之前用canvas画了一个环形进度条,想要实现从0到100颜色渐变效果,现有的线性渐变和径向渐变都无法满足,找到一种思路,仅供参考,先看效果: 预览地址:https://b3mk0.csb. ...
最新文章
- 实战Solaris 10
- table { border-collapse:collapse; }
- Linux crontab的使用方式，sh脚本的编写，sh脚本自动启动tomcat服务器，sh监控系统运行情况
- 如何中断JAVA线程
- wordpress home.php,WordPress主题通过function.php来加载js和css文件
- leetcode 102 C++AC
- 推荐几款提升效率的神器
- linux中 ls |wc -l
- 选择排序java代码_JAVA简单选择排序算法原理及实现
- 鸿蒙的应用列表,图解鸿蒙列表组件ListContainer
- 我用Python写了一个邮箱脚本发给班花，没想到事情闹大了...
- 具有分散效果的瀑布流
- 无法启动此程序，因为计算机中丢失 的解决办法
- html网站计数器代码,如何在网站添加计数器代码
- php 图形库 锯齿,PHP imageantialias - 是否使用抗锯齿（antialias）功能
- Rclone挂载SharePoint
- VS2019：添加现有项目 / 现有cpp文件
- 百度地图，定位，添加图标
- 优化弹出框sweetalert.min.js插件
- 留美CS学习的第一学期总结