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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
React 组件间的通信示例
Jun 14 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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 mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
python实现telnet客户端的方法
2015/04/15 Python
python中的格式化输出用法总结
2016/07/28 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python实现单词翻译功能
2017/06/06 Python
python调用摄像头拍摄数据集
2019/06/01 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
python同时遍历两个list用法说明
2020/05/02 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
12岁生日感言
2014/01/21 职场文书
学校捐书活动总结
2015/05/08 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
总结python多进程multiprocessing的相关知识
2021/06/29 Python
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
HDFS免重启挂载新磁盘
2022/04/06 Servers