js canvas实现QQ拨打电话特效


Posted in Javascript onMay 10, 2017

首先呢,先给特效。自己找手机录的,有点不清楚,请见谅!

js canvas实现QQ拨打电话特效

本来是打算做 腾讯的贝塞尔曲线下拉刷新图。然后和朋友打了个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变量名是按照安卓绘图的习惯来的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
bootstrap弹出层的多种触发方式
May 10 #Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 #Javascript
微信小程序 支付后台java实现实例
May 09 #Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 #Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 #Javascript
使用ES6语法重构React代码详解
May 09 #Javascript
JQuery实现定时刷新功能代码
May 09 #jQuery
You might like
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
JavaScript 常用函数
2009/12/30 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
在Python中使用第三方模块的教程
2015/04/27 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python pygame实现2048游戏
2018/11/20 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
详解python程序中的多任务
2020/09/16 Python
北京振戎融通Java面试题
2015/09/03 面试题
学习演讲稿范文
2014/05/10 职场文书
倡议书的写法
2014/08/30 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
音乐教师求职信范文
2015/03/20 职场文书
会议室管理制度范本
2015/08/06 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS