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代码(站点及虚拟目录)
Oct 20 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 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接收POST数据,解析json数据
2013/06/28 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
微信支付扫码支付php版
2016/07/22 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Python正则表达式学习小例子
2020/03/03 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
家长学校实施方案
2014/03/15 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
第二课堂活动总结
2014/05/07 职场文书
规范化管理年活动总结
2014/08/29 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Win10 Anaconda安装python-pcl
2022/04/29 Servers