廣告—：工作室
先給大家看幾個效果圖。（這裡錄製的gif軟體有瑕疵，會有間隔，實際上是很流暢的）
第一張，因為我是銜接上乙個的正弦影象的例子做的。所以直接在上面更改實現的。本想這樣可以實現水波流動的特效，但是正弦影象的繪製方式導致它不能填充，（可以去看看上上篇正弦影象的實現），所以嘍，這是失敗的案例1。
然後來看第二張，其實就是平滑的上公升。沒有什麼特別之處，
接著是最後一張，最後一張是使用三次貝塞爾曲線繪製的。其實，上面的水波是會動的，只不過動的幅度有點小。
總的來說，其實我這是未成功的案例。最好的應試能讓水波滾動。我嘗試著去動態移動貝塞爾曲線的位置，但是這樣的效果並不好。先分析上來看看有沒有大牛提供一些意見。底下我再去思考思考，看看有沒有其他方式去實現。
然後是 上第三張gif的**
只上傳js了
var paint, r;
var width, height;
var j = 0, c = 0,length=0;
/*程式入口*/
function
main
() /*開始進行清除和繪製*/
function
start
() /*繪製乙個外層的圓*/
function
drawarc
() /*計算圓和內部水波的偏移量,並賦給drawsin()長度*/
function
mathr
() /*變化正弦曲線的左右長度*/
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) else
paint.fill();
}/*繪製貝塞爾曲線，並且長度和位置可變*/
function
drawsin
(h)
覺得可以的話，就給個讚賞吧!js canvas 轉動時鐘例項
原始碼 樣本 arc 方法 來構造圓形，其中 起始角設定為 0，結束角設定為 2 math.pi 與繪製圓形是一樣的，只不過採用了 fillstyle屬性來填充顏色。鐘面共有60個刻度 在畫上繪製刻度，其時也就是求每個刻度的座標點。公式如下 假設圓心 o x0,y0 半徑 r 角度 angle 角度...
原生js canvas實現下雪效果
控制下雪 function snowfall snow this.maxflake snow.maxflake 200 最多片數 this.flakesize snow.flakesize 10 雪花形狀 this.fallspeed snow.fallspeed 1 墜落速度 相容寫法 reque...
js canvas逐個打字並畫心形
這是測試啊 漸變可以填充在矩形,圓形,線條,文字等等,各種形狀可以自己定義不同的顏色。以下有兩種不同的方式來設定canvas漸變 createlineargradient x,y,x1,y1 建立線條漸變 createradialgradient x,y,r,x1,y1,r1 建立乙個徑向 圓漸變 ...