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 相关文章推荐
jQuery 页面载入进度条实现代码
Feb 08 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Python检测网站链接是否已存在
2016/04/07 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
python简单区块链模拟详解
2019/07/03 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python Tornado框架的使用示例
2020/10/19 Python
.net软件工程师面试题
2015/03/31 面试题
文秘专业毕业生就业推荐信
2013/11/08 职场文书
团结演讲稿范文
2014/05/23 职场文书
企业员工薪酬方案
2014/06/04 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS