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

更新時間：2017年05月10日 08:48:06 作者：lovefive5

這篇文章主要為大家詳細介紹了js canvas實現(xiàn)QQ撥打電話特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

這里要注意的就是：

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

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

HTML代碼

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變量名是按照安卓繪圖的習慣來的。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: