广告—:工作室
先给大家看几个效果图。(这里录制的gif软件有瑕疵,会有间隔,实际上是很流畅的)
第一张,因为我是衔接上一个的正弦图像的例子做的。所以直接在上面更改实现的。本想这样可以实现水波流动的特效,但是正弦图像的绘制方式导致它不能填充,(可以去看看上上篇正弦图像的实现),所以喽,这是失败的案例1。
然后来看第二张,其实就是平滑的上升。没有什么特别之处,
接着是最后一张,最后一张是使用三次贝塞尔曲线绘制的。其实,上面的水波是会动的,只不过动的幅度有点小。
总的来说,其实我这是未成功的案例。最好的应试能让水波滚动。我尝试着去动态移动贝塞尔曲线的位置,但是这样的效果并不好。先分析上来看看有没有大牛提供一些意见。底下我再去思考思考,看看有没有其他方式去实现。
然后是 上第三张gif的代码
只上传js了
var paint, r;
var width, height;
var j = 0, c = 0,length=0;
/*程序入口*/
function main() {
var canvas1 = document.getElementById("canvas1");
paint = canvas1.getContext("2d");
width = paint.canvas.width;
height = paint.canvas.height;
r = width / 2;
j = -r;
start();
setInterval(start, 50);
}
/*开始进行清除和绘制*/
function start() {
paint.clearRect(0, 0, width, height);
drawArc();
mathR();
paint.restore();
}
/*绘制一个外层的圆*/
function drawArc() {
paint.save();
paint.translate(r, r);
paint.beginPath();
paint.arc(0, 0, r, 0, 2 * Math.PI, false);
paint.stroke();
}
/*计算圆和内部水波的偏移量,并赋给drawSin()长度*/
function mathR() {
/*控制上下移动*/
j++;
c++;
if (j == r) {
j = -r;
c = 0;
}
/*变化正弦曲线的左右长度*/
length = Math.sqrt(r * r - j * j);
drawSin(j);
/*绘制加载百分比*/
paint.beginPath();
paint.fillStyle = "#ff0000";
paint.font = 40 + "px Arial";
paint.textAlign = 'center';
paint.fillText(c * 100 / (2 * r) + "%", 0, 0);
/*计算角度值,绘制加载中颜色*/
var rad = Math.asin(Math.abs(j) / r);
paint.beginPath();
paint.fillStyle = "#66ccff";
paint.globalAlpha = 0.3;
if (j > 0) {
paint.arc(0, 0, r, -rad, Math.PI + rad, false);
} else {
paint.arc(0, 0, r, rad, Math.PI - rad, false);
}
paint.fill();
}
/*绘制贝塞尔曲线,并且长度和位置可变*/
function drawSin(h) {
paint.fillStyle = "#66ccff";
paint.globalAlpha = 0.3;
paint.beginPath();
paint.moveTo(-length,-h);
paint.bezierCurveTo(-length,-(h+50),length,-(h+50),length,-h);
paint.fill();
}
还是注意一下。坐标轴是从上到下,(-,0,+)
觉得可以的话,就给个赞赏吧!