js canvas實(shí)現(xiàn)QQ撥打電話特效
首先呢，先給特效。自己找手機(jī)錄的，有點(diǎn)不清楚，請(qǐng)見(jiàn)諒！
本來(lái)是打算做 騰訊的貝塞爾曲線下拉刷新圖。然后和朋友打了個(gè)QQ電話，稍微注意了一下未接通時(shí)候的動(dòng)畫(huà)。然后就想著實(shí)現(xiàn)以下。
這里要注意的就是：
canvas的中心點(diǎn)經(jīng)過(guò)變化到canvas的正中后
canvas的 Y軸由上至下 是從（-，+）；而數(shù)學(xué)坐標(biāo)系的Y軸由上至下 是從（+，-）的。
首先看一下html代碼。就至少簡(jiǎn)單的添加一個(gè)canvas，基本沒(méi)進(jìn)行其他操作。
HTML代碼
<canvas id="canvas1" width="500" height="500"></canvas>
JS代碼
var paint, r; //設(shè)置畫(huà)筆和半徑
var width, height; //獲得canvas的長(zhǎng)度和寬度
var count = 0; //設(shè)置正鉉曲線的便宜量
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);
}
/*開(kāi)始進(jìn)行清除和繪制*/
function start() {
paint.clearRect(0, 0, width, height);
drawXY();
drawSin();
paint.restore();
}
/*繪制一個(gè)坐標(biāo)系*/
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在直角坐標(biāo)系上的圖象，*/
/*繪制sin正弦圖像*/
function drawSin() {
paint.save();
count++;//設(shè)置每一刻的偏移量
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中需要注意的就是。在對(duì)圖像進(jìn)行計(jì)時(shí)改變的時(shí)候，一定要的先進(jìn)行清除。之后要對(duì)繪制過(guò)的圖像進(jìn)行保存和恢復(fù)。不然程序會(huì)出現(xiàn)重疊或者無(wú)法顯示等bug。
這里定義的paint變量名是按照安卓繪圖的習(xí)慣來(lái)的。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
數(shù)組(Array)是有序的元素序列,若將有限個(gè)類(lèi)型相同的變量的集合命名,那么這個(gè)名稱(chēng)為數(shù)組名,下面這篇文章主要給大家介紹了關(guān)于ES6中數(shù)組新增方法的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了JavaScript中包裝對(duì)象的一些知識(shí)點(diǎn)，包括內(nèi)置對(duì)象等2013-08-08
Webpack 4如何動(dòng)態(tài)切割JS注入文件名詳解
這篇文章主要給大家介紹了關(guān)于Webpack 4如何動(dòng)態(tài)切割JS注入文件名的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Webpack4具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
JavaScript 判斷數(shù)據(jù)類(lèi)型的4種方法
這篇文章主要介紹了JavaScript 判斷數(shù)據(jù)類(lèi)型的4種方法，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了使用fileReader的一個(gè)坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-12-12
基于JS實(shí)現(xiàn)經(jīng)典的井字棋游戲
井字棋作為我們?cè)谏蠈W(xué)時(shí)代必玩的一款連珠游戲，承載了很多人的童年記憶。本文我們就用HTML、css、js來(lái)實(shí)現(xiàn)一款井字棋游戲，感興趣的可以動(dòng)手嘗試一下2022-04-04
奉獻(xiàn)給JavaScript初學(xué)者的編寫(xiě)開(kāi)發(fā)的七個(gè)細(xì)節(jié)
每種語(yǔ)言都有它特別的地方，對(duì)于JavaScript來(lái)說(shuō)，使用var就可以聲明任意類(lèi)型的變量，這門(mén)腳本語(yǔ)言看起來(lái)很簡(jiǎn)單，然而想要寫(xiě)出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗(yàn)的。本文利列舉了JavaScript初學(xué)者應(yīng)該注意的七個(gè)細(xì)節(jié)，與大家分享。2011-01-01
JS實(shí)現(xiàn)求字符串中出現(xiàn)最多次數(shù)的字符和次數(shù)示例
這篇文章主要介紹了JS實(shí)現(xiàn)求字符串中出現(xiàn)最多次數(shù)的字符和次數(shù),涉及javascript針對(duì)字符串的遍歷、統(tǒng)計(jì)、計(jì)算等相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
微信小程序跨頁(yè)面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了微信小程序跨頁(yè)面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了淺談webpack 四個(gè)核心概念之Entry，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06