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)文章
微信小程序picker組件兩列關(guān)聯(lián)使用方式
這篇文章主要介紹了微信小程序picker組件兩列關(guān)聯(lián)使用方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
javascript中簡(jiǎn)單的進(jìn)制轉(zhuǎn)換代碼實(shí)例
這篇文章介紹了javascript中簡(jiǎn)單的進(jìn)制轉(zhuǎn)換代碼實(shí)例，有需要的朋友可以參考一下2013-10-10
這篇文章主要介紹了微信小程序海報(bào)繪制示例,海報(bào)分享功能在許多應(yīng)用中應(yīng)該是很常見(jiàn)的,因?yàn)樗鳛橐环N常用的應(yīng)用推廣和拉新的方式,下面我們來(lái)通過(guò)案例學(xué)習(xí)如何繪制2024-05-05
解析JavaScript中的不可見(jiàn)數(shù)據(jù)類(lèi)型
這篇文章主要是對(duì)JavaScript中的不可見(jiàn)數(shù)據(jù)類(lèi)型進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
用慣了vue和react之后可能會(huì)慢慢淡忘掉原生的一些操作dom的幾種方式,有的時(shí)候確實(shí)需要我們通過(guò)原生的方式進(jìn)行操作,下面這篇文章主要給大家介紹了關(guān)于js修改元素樣式的九種方式,需要的朋友可以參考下2024-04-04
ES6的內(nèi)置對(duì)象擴(kuò)展實(shí)現(xiàn)示例
本文主要介紹了ES6的內(nèi)置對(duì)象擴(kuò)展實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Echarts之懸浮框中的數(shù)據(jù)排序問(wèn)題
Echarts非常強(qiáng)大，配置也非常的多，有很多細(xì)節(jié)需要深入研究。這篇文章主要介紹了Echarts之懸浮框中的數(shù)據(jù)排序問(wèn)題,需要的朋友可以參考下2018-11-11
JavaScript實(shí)現(xiàn)定時(shí)隱藏與顯示圖片的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)定時(shí)隱藏與顯示圖片的方法,可實(shí)現(xiàn)javascript定時(shí)關(guān)閉圖片的功能,涉及javascript針對(duì)頁(yè)面元素屬性定時(shí)操作的相關(guān)技巧,需要的朋友可以參考下2015-08-08
往輸入域中插入字符串(光標(biāo)所在位置)，在本文將為大家介紹下使用js是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-09-09
如何使用pace.js美化你的網(wǎng)站加載進(jìn)度條詳解
Pace.js是一個(gè)非常有意思的js插件,可以自動(dòng)的監(jiān)聽(tīng)頁(yè)面的加載數(shù)據(jù),并且能夠定制加載條,下面這篇文章主要給大家介紹了關(guān)于使用pace.js如何美化你的網(wǎng)站加載進(jìn)度條的相關(guān)資料,需要的朋友可以參考下2022-02-02