廣告—：工作室

先給大家看幾個(gè)效果圖。（這里錄制的gif軟件有瑕疵，會(huì)有間隔，實(shí)際上是很流暢的）

第一張，因?yàn)槲沂倾暯由弦粋€(gè)的正弦圖像的例子做的。所以直接在上面更改實(shí)現(xiàn)的。本想這樣可以實(shí)現(xiàn)水波流動(dòng)的特效，但是正弦圖像的繪制方式導(dǎo)致它不能填充，（可以去看看上上篇正弦圖像的實(shí)現(xiàn)），所以嘍，這是失敗的案例1。

然后來看第二張，其實(shí)就是平滑的上升。沒有什么特別之處，

接著是最后一張，最后一張是使用三次貝塞爾曲線繪制的。其實(shí)，上面的水波是會(huì)動(dòng)的，只不過動(dòng)的幅度有點(diǎn)小。

總的來說，其實(shí)我這是未成功的案例。最好的應(yīng)試能讓水波滾動(dòng)。我嘗試著去動(dòng)態(tài)移動(dòng)貝塞爾曲線的位置，但是這樣的效果并不好。先分析上來看看有沒有大牛提供一些意見。底下我再去思考思考，看看有沒有其他方式去實(shí)現(xiàn)。

然后是 上第三張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); }/*開始進(jìn)行清除和繪制*/ function start() {paint.clearRect(0, 0, width, height);drawArc();mathR();paint.restore(); }/*繪制一個(gè)外層的圓*/ function drawArc() {paint.save();paint.translate(r, r);paint.beginPath();paint.arc(0, 0, r, 0, 2 * Math.PI, false);paint.stroke(); }/*計(jì)算圓和內(nèi)部水波的偏移量,并賦給drawSin()長度*/ function mathR() {/*控制上下移動(dòng)*/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);/*計(jì)算角度值，繪制加載中顏色*/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(); }

還是注意一下。坐標(biāo)軸是從上到下，（-，0，+）

覺得可以的話，就給個(gè)贊賞吧!

總結(jié)

以上是生活随笔為你收集整理的js+canvas绘制360加速球的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。