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 利用闭包模拟对象的私有属性
Dec 29 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
深入解析php模板技术原理【一】
2008/01/10 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP之COOKIE支持详解
2010/09/20 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
spyder常用快捷键(分享)
2017/07/19 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python实现简单flappy bird
2018/12/24 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
python中如何写类
2020/06/29 Python
flask框架中的cookie和session使用
2021/01/31 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
附答案的Java面试题
2012/11/19 面试题
电大自我鉴定范文
2013/10/01 职场文书
医院义诊活动总结
2014/07/04 职场文书
个人授权委托书
2014/09/15 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
入党转正介绍人意见
2015/06/03 职场文书
烈士陵园观后感
2015/06/08 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python