首先呢，先給特效。自己找手機錄的，有點不清楚，請見諒！

本來是打算做 騰訊的貝塞爾曲線下拉刷新圖。然后和朋友打了個QQ電話，稍微注意了一下未接通時候的動畫。然后就想著實現以下。

這里要注意的就是：

canvas的中心點經過變化到canvas的正中后
canvas的 Y軸由上至下 是從（-，+）；而數學坐標系的Y軸由上至下 是從（+，-）的。

首先看一下html代碼。就至少簡單的添加一個canvas，基本沒進行其他操作。

HTML代碼

<canvas id="canvas1" width="500" height="500"></canvas>

JS代碼

var paint, r; //設置畫筆和半徑 var width, height; //獲得canvas的長度和寬度 var count = 0; //設置正鉉曲線的便宜量 var colors = ["#66ccff", "#ff0000"]; /*程序入口*/ function main() { var canvas1 = document.getElementById("canvas1"); paint = canvas1.getContext("2d"); width = paint.canvas.width; height = paint.canvas.height; r = width / 2; start(); setInterval(start, 200); } /*開始進行清除和繪制*/ function start() { paint.clearRect(0, 0, width, height); drawXY(); drawSin(); paint.restore(); } /*繪制一個坐標系*/ function drawXY() { paint.save(); paint.translate(r, r); paint.beginPath(); paint.lineWidth = 1; paint.moveTo(0, -r); paint.lineTo(0, r); paint.stroke(); paint.lineWidth = 1; paint.moveTo(-r, 0); paint.lineTo(r, 0); paint.stroke(); } /*正弦曲線可表示為y=Asin(ωx+φ)+k，定義為函數y=Asin(ωx+φ)+k在直角坐標系上的圖象，*/ /*繪制sin正弦圖像*/ function drawSin() { paint.save(); count++;//設置每一刻的偏移量 var i, j, rad, y; for (j = 0; j < 2; j++) { for (i = -1000; i < 1000; i++) { paint.beginPath(); paint.strokeStyle = colors[j]; rad = i * Math.PI / 180; y = -20 * Math.sin(rad - (count + j)); paint.arc(i, y, 0.3, 0, 2 * Math.PI, false); paint.stroke(); } } paint.restore(); }

JS中需要注意的就是。在對圖像進行計時改變的時候，一定要的先進行清除。之后要對繪制過的圖像進行保存和恢復。不然程序會出現重疊或者無法顯示等bug。

這里定義的paint變量名是按照安卓繪圖的習慣來的。