當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue 圆形水波_canvas 水滴图、液体进度条、仿加速球、圆球水波图

發布時間：2023/12/10 vue 143 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue 圆形水波_canvas 水滴图、液体进度条、仿加速球、圆球水波图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

傳送門：https://github.com/guoyoujin/WaterMoire

test

body {

display: flex;

flex-flow: column wrap;

justify-content: center;

align-items: center;

}

#c {

margin-top: 20px;

}

input[type=range]::before {content: attr(min); color: #000; padding-right: 5px;}

input[type=range]::after { content: attr(max); color: #000; padding-left: 5px;}

當前瀏覽器不支持canvas 請升級！

let canvas = document.getElementById("c")

let ctx = canvas.getContext("2d")

let oRange = document.getElementsByName("range")[0];

let M = Math

let Sin = M.sin

let Cos = M.cos

let Sqrt = M.sqrt

let Pow = M.pow

let PI = M.PI

let Round = M.round

let oW = canvas.width = 250

let oH = canvas.height = 250

let lineWidth = 2 // 線寬

let r = (oW / 2) // 大半徑

let cR = r - 10 * lineWidth

ctx.beginPath()

ctx.lineWidth = lineWidth

// 水波動畫初始參數

let axisLength = 2 * r - 16 * lineWidth // Sin 圖形長度

let unit = axisLength / 9 // 波浪寬

let range = .4 // 浪幅

let nowrange = range

let xoffset = 8 * lineWidth // x 軸偏移量

let data = ~~(oRange.value) / 100 // 數據量

let sp = 0 // 周期偏移量

let nowdata = 0

let waveupsp = 0.006 // 水波上漲速度

// 圓動畫初始參數

let arcStack = [] // 圓棧

let bR = r - 8 * lineWidth

let soffset = -(PI / 2) // 圓動畫起始位置

let circleLock = true // 起始動畫鎖

// 獲取圓動畫軌跡點集

for (var i = soffset; i < soffset + 2 * PI; i += 1 / (8 * PI)) {

arcStack.push([

r + bR * Cos(i),

r + bR * Sin(i)

])

}

// 圓起始點

let cStartPoint = arcStack.shift();

ctx.strokeStyle = "#1c86d1";

ctx.moveTo(cStartPoint[0], cStartPoint[1]);

// 開始渲染

render();

function drawSine() {

ctx.beginPath();

ctx.save();

var Stack = []; // 記錄起始點和終點坐標

for (var i = xoffset; i <= xoffset + axisLength; i += 20 / axisLength) {

var x = sp + (xoffset + i) / unit;

var y = Sin(x) * nowrange;

var dx = i;

var dy = 2 * cR * (1 - nowdata) + (r - cR) - (unit * y);

ctx.lineTo(dx, dy);

Stack.push([dx, dy])

}

// 獲取初始點和結束點

var startP = Stack[0]

var endP = Stack[Stack.length - 1]

ctx.lineTo(xoffset + axisLength, oW);

ctx.lineTo(xoffset, oW);

ctx.lineTo(startP[0], startP[1])

ctx.fillStyle = "#fbec99";

ctx.fill();

ctx.restore();

}

function drawText() {

ctx.globalCompositeOperation = 'source-over';

var size = 0.4 * cR;

ctx.font = 'bold ' + size + 'px Microsoft Yahei';

let txt = (nowdata.toFixed(2) * 100).toFixed(0) + '`%';

var fonty = r + size / 2;

var fontx = r - size * 0.8;

ctx.fillStyle = "#f6b71e";

ctx.textAlign = 'center';

ctx.fillText(txt, r + 5, r + 20)

}

//最外面淡黃色圈

function drawCircle() {

ctx.beginPath();

ctx.lineWidth = 15;

ctx.strokeStyle = '#fff89d';

ctx.arc(r, r, cR + 7, 0, 2 * Math.PI);

ctx.stroke();

ctx.restore();

}

//灰色圓圈

function grayCircle() {

ctx.beginPath();

ctx.lineWidth = 10;

ctx.strokeStyle = '#eaeaea';

ctx.arc(r, r, cR - 5, 0, 2 * Math.PI);

ctx.stroke();

ctx.restore();

ctx.beginPath();

}

//橘黃色進度圈

function orangeCircle() {

ctx.beginPath();

ctx.strokeStyle = '#fbdb32';

//使用這個使圓環兩端是圓弧形狀

ctx.lineCap = 'round';

ctx.arc(r, r, cR - 5, 0 * (Math.PI / 180.0) - (Math.PI / 2), (nowdata * 360) * (Math.PI / 180.0) - (Math.PI / 2));

ctx.stroke();

ctx.save()

}

//裁剪中間水圈

function clipCircle() {

ctx.beginPath();

ctx.arc(r, r, cR - 10, 0, 2 * Math.PI, false);

ctx.clip();

}

//渲染canvas

function render() {

ctx.clearRect(0, 0, oW, oH);

//最外面淡黃色圈

drawCircle();

//灰色圓圈

grayCircle();

//橘黃色進度圈

orangeCircle();

//裁剪中間水圈

clipCircle();

// 控制波幅

oRange.addEventListener("change", function() {

data = ~~(oRange.value) / 100;

}, 0);

if (data >= 0.85) {

if (nowrange > range / 4) {

var t = range * 0.01;

nowrange -= t;

}

} else if (data <= 0.1) {

if (nowrange < range * 1.5) {

var t = range * 0.01;

nowrange += t;

}

} else {

if (nowrange <= range) {

var t = range * 0.01;

nowrange += t;

}

if (nowrange >= range) {

var t = range * 0.01;

nowrange -= t;

}

if ((data - nowdata) > 0) {

nowdata += waveupsp;

}

if ((data - nowdata) < 0) {

nowdata -= waveupsp

}

sp += 0.07;

// 開始水波動畫

drawSine();

// 寫字

drawText();

requestAnimationFrame(render)

}

canvas繪制百分比圓環進度條

開發項目,PM會跟蹤項目進度:完成某個事情,也可以設置一個完成的進度. 這里用canvas繪制一個簡單百分比圓環進度條. 看下效果: 1. 動畫方式 ? 2. 靜默方式 ? // 貼上代碼,僅供參考 ...

canvas實現半圓環形進度條

html部分

抱歉 ...

Qt實現炫酷啟動圖-動態進度條

目錄一.簡述二.動效進度條 1.光效進度條 2.延遲到達進度條 3.接口說明三.啟動圖 1.實現思路 2.背景圖切換四.測試 1.構造啟動圖 2.背景圖 3.其他信息 4.事件循環五.源碼 ...

canvas三環加載進度條

之前做了一個三個圓形疊加在一起的加載,用的是定位和cile來操作,但是加載的頭部不能是圓形.后來用canvas做了一個,但是這個加載的進度不好調整,原理很簡單,就是讓一個圓,按照圓形軌跡進行運動就可以 ...

canvas的簡單圓形進度條

window.onload = function(){ function arc(canvas,number){ var canvas = document.getElementById(canvas ...

第五周 PSP 燃盡圖以及進度條總結

1.PSP DATE START-TIME END-TIME EVENT ? ? ? ? ? DELTA TYPE 3.12 9.30 11.30 環境搭建音樂30min QQ25min ? ? ? ...

canvas 繪制動態圓環進度條

由于使用的是vue開發,所以就展示一下繪制函數好了,上圖是效果圖 drawMain(drawing_elem, percent, forecolor, bgcolor) { /* @drawing_e ...

通過DIV+span方式模擬進度條的實現方法

上上周用FusionCharts做報表時,有個圖是進度條的形式,其實在FusionCharts 3.0之后已經支持了(Linear Gauge),可惜現有系統用的還是1.2.3版本的,重新引入新版本有 ...

BootStrap入門教程 (三) ：可重用組件(按鈕，導航，標簽，徽章，排版，縮略圖，提醒，進度條，雜項)

上講回顧:Bootstrap的基礎CSS(Base CSS)提供了優雅,一致的多種基礎Html頁面要素,包括排版,表格,表單,按鈕等,能夠滿足前端工程師的基本要素需求. Bootstrap作為完整的前 ...

隨機推薦

Git Day03,GitHub 1st

1st, SSH key: Add a pic @ Sep 18 2016 20:26 To note the configuration process on Linux: 2nd,github網站 ...

LINQ延遲查詢的例子

//linq延遲查詢.兩次查詢結果不同 List l = new List() { "aaa", "bbb&quo ...

(轉)Sencha Touch和jQuery Mobile的比較

原文:http://extjs.org.cn/node/664 Sencha Touch和jQuery Mobile的比較 Posted 周三, 08/07/2013 - 10:07 by?admin ...

skinned mesh 蜘蛛樣

被skinned mesh 折磨了好久,開始感覺skinindices不對,因為pix顯示里面全是0 后來跟來跟去發現是這樣的,那些uchar的整數被pix用float的格式顯示出來 (顯示為0.0 ...

php中url傳遞中文字符,特殊危險字符的解決方法

php中的urldecode,base64_encode函數然后再結合自己寫的替換函數來進行安全傳遞url中文字符,特殊危險字符. 需要在url中傳遞中文字符或是其它的html等特殊字符,似乎總會有各 ...

linux下安裝php的swoole擴展模塊(安裝后php加載不出來？)

應開發同事要求,需要安裝php的擴展模塊swoole.swoole是一種PHP高級Web開發框架,框架不是為了提升網站的性能,而是為了提升網站的開發效率,以最少的性能損耗,換取最大的開發效率. 假設服 ...

c++清除輸入緩沖區之 sync() vs ignore()

最近在寫程序的時候總是不注意輸入緩沖區內是否還有東西,導致出現了一些異常,調試了半天.所以來上一貼,學習注意,引以為戒! http://blog.chinaunix.net/uid-21254310- ...

Drawer&lowbar;layout 關閉滑動視圖

在android抽屜Drawer_layout開發中,我需要關閉滑動的試圖找到了這個方法 mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MOD ...

Kali for Android

使用設備:小米平板1 材料:Complete Linux Installer(好像是這個名字,很多應用商店都能下載,所以我就不用送上鏈接了) 進入app之后,按照著提示做就是了.關于鏡像,也是在app ...

19 Handler 總結

Handler 一, 回顧異步任務 AsyncTask 二, android 使用線程的規則 1,在主線程不能做阻塞操作 2,在主線程之外的線程不能更新Ui 三, Handler的作用 1,在子線程 ...

總結

以上是生活随笔為你收集整理的vue 圆形水波_canvas 水滴图、液体进度条、仿加速球、圆球水波图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：电脑知识：Win10系统把系统盘的软件移
下一篇：后端：SpringBoot集成Swagg

vue

vue 圆形 水波_canvas 水滴图、液体进度条、仿加速球、圆球水波图

總結

vue 圆形水波_canvas 水滴图、液体进度条、仿加速球、圆球水波图