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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
node+vue实现文件上传功能
May 28 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发送HTTP请求的几种方式
2017/07/25 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python List cmp()知识点总结
2019/02/18 Python
python读取Excel表格文件的方法
2019/09/02 Python
python实现程序重启和系统重启方式
2020/04/16 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
Python 中如何写注释
2020/08/28 Python
Python random模块的使用示例
2020/10/10 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
销售经理工作职责范文
2013/12/03 职场文书
高中英语教学反思
2014/02/04 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
教代会闭幕词
2015/01/28 职场文书
学校运动会通讯稿
2015/07/18 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL