canvas画水球

最新推荐文章于 2025-07-10 23:13:36 发布

原创

最新推荐文章于 2025-07-10 23:13:36 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #canvas #html5

这篇博客展示了如何使用HTML5的canvas元素和JavaScript来创建一个动态的水球动画效果，包括水位上升和波动的视觉表现。通过Water_Polo函数实现水球的绘制，并在其中设置参数如水的高度比例、颜色、剩余文字等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不说了，直接代码上~~~~

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.water_canvas{border:1px solid #ff00ff;}
</style>

<body>
<canvas id="feeWater" width="180" height="180" class="water_canvas"></canvas>
</body>
<script type="text/javascript">
window.onload = function(){
Water_Polo("feeWater", 0.7, "red", "45.7", "剩", "/ 元", 48, 80, 60, 120);
}
/************************************************************
*水球动画效果，Water_Polo（canvasID,水的高度比例，水的颜色，剩余，剩余数字,单位，两个文字的坐标）;
************************************************************/
function Water_Polo(canvas_id,water_size,water_color,text1,text2,text_unit,t1_x,t1_y,t2_x,t2_y) {
console.log("current canvas id is :"+canvas_id);
var ctx = document.getElementById(canvas_id).getContext('2d');
var step = 0;
var w_size = water_size * 180;
console.log("water_size and 水球高度"+water_size+","+w_size);
var size = 0;
var i = 180;//最大高度值
var k = 0;
console.log("111begen size:"+w_size);
setInterval(Decline_water,30);
function Decline_water(){
if(k<178){
k+=3;