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 相关文章推荐
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php常用Stream函数集介绍
2013/06/24 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
如何离线执行php任务
2017/02/21 PHP
thinkphp分页集成实例
2017/07/24 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
python的re模块应用实例
2014/09/26 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
在python中实现对list求和及求积
2018/11/14 Python
如何基于python实现归一化处理
2020/01/20 Python
Python中如何引入第三方模块
2020/05/27 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
委托书模板
2014/04/04 职场文书
村委会换届选举方案
2014/05/03 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
2014年司法局工作总结
2014/12/11 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js