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 相关文章推荐
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JS打印彩色菱形的实例代码
Aug 15 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 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生成静态HTML文档的原理
2012/10/29 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
Python函数嵌套实例
2014/09/23 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
荷兰超市:DEEN
2018/03/14 全球购物
婚礼主持词
2014/03/13 职场文书
请客吃饭开场白
2015/06/01 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书