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 相关文章推荐
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
原生js实现简单轮播图
Oct 26 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实现俄罗斯乘法实例
2015/03/07 PHP
PHP序列化操作方法分析
2016/09/28 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
字太多用...代替的方法(两种)
2017/03/15 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
一道python走迷宫算法题
2018/01/22 Python
python字符串与url编码的转换实例
2018/05/10 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python selenium 弹出框处理的实现
2019/02/26 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
python调试神器PySnooper的使用
2019/07/03 Python
python字符串判断密码强弱
2020/03/18 Python
Python用Jira库来操作Jira
2020/12/28 Python
校园创业策划书
2014/01/14 职场文书
商业活动邀请函
2014/02/04 职场文书
创先争优活动方案
2014/02/12 职场文书
保密工作责任书
2014/04/16 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
物业管理交接协议书
2016/03/24 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
Python学习之os包使用教程详解
2022/03/21 Python
带你了解Java中的ForkJoin
2022/04/28 Java/Android