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变量名是按照安卓绘图的习惯来的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript仿qq界面的折叠菜单实现代码

    最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,上网查了一下,发现已经有不少类似的菜单效果,不管那么多,先写着再说吧. 以下是html结构: <div id="a"><div id="h1">sdfds</div><div id="b1">dsfdsfsdfsd</div><div id="h2">dsf</div&

  • js QQ客服悬浮效果实现代码

    代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

  • js如何调用qq互联api实现第三方登录

    qq互联js SDK:http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E 复制代码 代码如下: <script type=text/javascript> 在页面header中引入:<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"

  • JS判断客服QQ号在线还是离线状态的方法

    本文实例讲述了JS判断客服QQ号在线还是离线状态的方法.分享给大家供大家参考.具体分析如下: 不知道从什么时候开始,原来QQ官方自带的在线离线状态的代码已经不能准确显示在线或离线状态了,现在自己用JS判断QQ在线离线状态值,根据状态值输出在线图片还是离线图片. 复制代码 代码如下: <script src="JS/jquery-1.5.1.min.js"></script> <div class="kfli" onclick="

  • 用js实现QQ在线查询功能

    这段程序的方法是利用XMLHTTP来读取腾讯网站的相应HTML代码获取QQ的头像,根据这个想法,我们还可以抓取很多其他网站的信息,如天气预报.新闻等等. <script language="JavaScript">  <!--   function getFaceImg(QQcode)   {   var Re=new RegExp("^[1-9]{1}\d+$","g");   if (!QQcode !Re.test(QQc

  • js仿QQ中对联系人向左滑动、滑出删除按钮的操作

    js仿QQ中对联系人向左滑动、滑出删除按钮的操作

    本文实例为大家分享实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

  • js canvas实现QQ拨打电话特效

    js canvas实现QQ拨打电话特效

    首先呢,先给特效.自己找手机录的,有点不清楚,请见谅! 本来是打算做 腾讯的贝塞尔曲线下拉刷新图.然后和朋友打了个QQ电话,稍微注意了一下未接通时候的动画.然后就想着实现以下. 这里要注意的就是: canvas的中心点经过变化到canvas的正中后 canvas的 Y轴由上至下 是从(-,+):而数学坐标系的Y轴由上至下 是从(+,-)的. 首先看一下html代码.就至少简单的添加一个canvas,基本没进行其他操作. HTML代码 <canvas id="canvas1" wi

  • JS实现仿QQ聊天窗口抖动特效

    JS实现仿QQ聊天窗口抖动特效 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript层抖动效果</title> <style type="text/css"> #body{text-align:center;} #test{w

  • JS实现从顶部下拉显示的带动画QQ客服特效代码

    JS实现从顶部下拉显示的带动画QQ客服特效代码

    本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码.分享给大家供大家参考,具体如下: 这是一款动画版QQ在线客服代码,从网页顶部下拉出来的QQ客服,下滑结束后有弹性缓冲效果.在世界地图的映衬下,似乎一下子上升了品位.动画效果是由jq实现的,QQ客服的一些信息自己修改下,换成你自己的QQ,上传到网页就可用啦.注:在火狐台chrome浏览器中测试效果会更好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-show-down-

  • Dcloud的native.js直接拨打电话Android实例代码

    利用Dcloud的native.js直接拨打电话实例代码Android版,由于iOS系统的限制所以只有Android版实例 下面3种方式都可以实例,大家可以测试下总有一款适合你 function call(){ // 导入Activity.Intent类 var Intent = plus.android.importClass("android.content.Intent"); var Uri = plus.android.importClass("android.net

  • js canvas实现星空连线背景特效

    本文实例为大家分享了js canvas星空连线背景的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>canvas星空连线背景特效</title> <style type="text/css"> body{ margin: 0; } #canvas{ display: block; background: #000; ma

  • html+css+js实现canvas跟随鼠标的小圆特效源码

    html+css+js实现canvas跟随鼠标的小圆特效源码

    效果(源码在最后): 实现: 1.定义标签: <h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas,请更换浏览器后再试 </canvas> 2. 文字的基本样式: h1{ position: absolute; top: 50%; left: 50%; transform: translate

  • js canvas实现随机粒子特效

    js canvas实现随机粒子特效

    本文实例为大家分享了js canvas随机粒子特效的具体代码,供大家参考,具体内容如下 前言 canvas实现前端的特效美术 结果展示 代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&qu

  • JS前端使用Canvas快速实现手势解锁特效

    JS前端使用Canvas快速实现手势解锁特效

    目录 前言 Demo 需要实现的功能 初始化数据和页面渲染 touchstart 手指开始触摸事件 touchmove 监听手指滑动事件 touchend 监听手指触摸结束事件 页面滚动处理 连接的两颗星星之间有其他星星时 前言 之前在公司开发活动项目的时候,遇到一个项目需求要让用户使用手势画星位图来解锁星座运势,一看设计稿,这不就是我们平时的手机屏幕解锁吗?于是上网搜了一些关于手势解锁的文章,没找到可以直接复用的,于是只能自己打开canvas教程,边学习边设计实现了这个功能,同时兼容了移动端和

  • JS+canvas动态绘制饼图的方法示例

    JS+canvas动态绘制饼图的方法示例

    本文实例讲述了JS+canvas动态绘饼图的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas饼状图</title> </head> <body> <canvas id=

  • JS+Canvas实现的俄罗斯方块游戏完整实例

    JS+Canvas实现的俄罗斯方块游戏完整实例

    本文实例讲述了JS+Canvas实现的俄罗斯方块游戏.分享给大家供大家参考,具体如下: 试玩(没有考虑兼容低版本浏览器): ********************************************************************** 9月3日更新: 修复了隐藏的比较深的BUG 加上暂停.再来一次功能 速度随分数增高而递减 添加log日志 ****************************************************************

随机推荐