js中canvas如何實現(xiàn)QQ撥打電話特效

這篇文章將為大家詳細講解有關js中canvas如何實現(xiàn)QQ撥打電話特效，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

首先呢，先給特效。

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

這里要注意的就是：

canvas的中心點經(jīng)過變化到canvas的正中后
canvas的 Y軸由上至下 是從（-，+）；而數(shù)學坐標系的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，定義為函數(shù)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中需要注意的就是。在對圖像進行計時改變的時候，一定要的先進行清除。之后要對繪制過的圖像進行保存和恢復。不然程序會出現(xiàn)重疊或者無法顯示等bug。

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

JavaScript的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進行服務器端編程。

關于“js中canvas如何實現(xiàn)QQ撥打電話特效”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。