使用HTML5中的Canvas实现2D水池效果

最新推荐文章于 2024-08-19 01:33:22 发布

J1en

最新推荐文章于 2024-08-19 01:33:22 发布

阅读量4.8k

点赞数 1

分类专栏：前端技术文章标签： html5 canvas 2d 水池

本文链接：https://blog.csdn.net/u014136281/article/details/49180107

版权

无图无真相，先看一下效果

下面添上代码：

pool.js

var _clientwidth = document.body.clientWidth;
var _poolDia = _clientwidth / 2; //水池直径
var canvas = document.getElementById("pool");
var waterSpaceHeight = _poolDia - canvas.dataset.progress * _poolDia / 100; //水池距离顶端有高度
//设定canvas的基本属性
canvas.width = _clientwidth / 2;
canvas.height = _clientwidth / 2;
canvas.style.marginLeft = _poolDia / 2 +