先看看下面的效果图，想想使用canvas是怎样实现的？

如下图：

这个就不详细描述了，看代码就会了。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <style type="text/css">

        #canvas {

            border:1px solid red;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type="text/javascript">

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "red";

    ctx.fillRect(0,0,80,50);

    var speedX = 1,

        speedY = 2,

        i1 = 0,

        i2 = 0;

        w = 80,

        h = 50,

        dirX = true,

        dirY = true;

    function run() {

        if(dirX) {

            i1++;

        }else {

            i1--;

        }

        if(dirY) {

            i2++;

        }else {

            i2--;

        }

        //清除画布

        ctx.clearRect(0,0,400,400);

        //判断边界

        if(i1*speedX > (canvas.width - w)) {

            dirX = false;

        }else if(i1*speedX < 0){

            dirX = true;

        }

        if(i2*speedY > (canvas.height - h)) {

            dirY = false;

        }else if(i2*speedY < 0) {

            dirY = true;

        }

        //绘制矩形

        ctx.fillRect(i1*speedX,i2*speedY,w,h);

        window.requestAnimationFrame(run);

    }

    window.requestAnimationFrame(run);

    </script>

</body>

</html>

canvas实现类似弹窗广告效果的更多相关文章

  1. QQ聊天窗口上的广告与QQ弹窗广告的完美屏蔽去除

    涉及的软件 1. QQ  (笔者的为v8.2版本) 2. Win7 3. ADSafe(3.13.308.9900正式版) 前言 QQ广告十分讨人厌,除了QQ弹窗的广告,让人十分反感外,最近发现QQ聊 ...

  2. DNS弹窗广告遭遇

    事情是这样的,不久前,我跟往常一样打开某新闻网页的时候,发现右下角有弹窗广告,并且在原页面任意位置点击,都会打开一个广告页面,然后原页面才能正常点击,手法太低劣了,不像是网站挂的广告,然后打开其它网页 ...

  3. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  4. Android 两种方式实现类似水波扩散效果

    原文链接 https://mp.weixin.qq.com/s/M19tp_ShOO6esKdozi7Nlg 两种方式实现类似水波扩散效果,先上图为敬 自定义view实现 动画实现 自定义view实现 ...

  5. canvas实现酷炫气泡效果

    canvas实现动画主要是靠设置定时器(setinterval())和定时清除画布里的元素实现,canvas动画上手很简单,今天可以自己动手来实现一个酷炫气泡效果. 气泡炸裂效果(类似水面波纹) 代码 ...

  6. 使用JavaScript和Canvas打造真实的雨滴效果

    使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...

  7. 弹窗层效果的实现（非jQuery实现）

    要想实现弹窗的效果,首先应该创建一个覆盖层maskLayer,以及一个显示层presentLayer. 其次,每次弹窗时(除首次弹窗外),maskLayer的显示以及隐藏不应该导致文档流的reflow ...

  8. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  9. 经典！HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

随机推荐

  1. 滚动RollUp、压缩

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. Asp.Net_网站性能

    1.如果不想被微软包围(其实微软的一套并不贵,是被谣言传高了),数据层依然可以选择SQL Server数据库和存储过程. 2.缓存不再依赖.net自身提供的缓存机制,迁移到部署在Linux平台上的分布 ...

  3. Evolutionary Computing: 3. Genetic Algorithm(2)

    承接上一章,接着写Genetic Algorithm. 本章主要写排列表达(permutation representations) 开始先引一个具体的例子来进行表述 Outline 问题描述 排列表 ...

  4. python核心编程第六章练习6-9

    6-9.转换.为练习5-13写一个姊妹函数,接受分钟数,返回小时数和分钟数.总时间不变,并且要求小时尽可能大.[答案]代码如下: #!/usr/bin/env python # translate m ...

  5. GitHub 上有哪些完整的 iOS-App 源码值得参考

    作者:wjh2005链接:https://www.zhihu.com/question/28518265/answer/88750562来源:知乎著作权归作者所有,转载请联系作者获得授权. 1. Co ...

  6. [转载]MySQL将DateTime时间类型格式化

    DATE_FORMAT(date,format)  根据format字符串安排date值的格式.   select from_unixtime(time,'%Y-%m-%d %H:%i:%s');   ...

  7. HTML5本地数据库(WebSQL)[转]

    除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌 ...

  8. HDU 1561 树形DP入门

    The more, The Better Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  9. IT公司100题-28-整数的二进制表示中1的个数

    问题描述: 输入一个整数n,求n的二进制表示中,一共有多少个1.例如n=8,二进制表示为00001000,二进制表示中有1个1.     分析: 如果一个数n不为0,那么n-1的二进制表示,与n的二进 ...

  10. 使用squid配置透明代理并对上网行为进行控制

    使用Squid配置透明代理 环境:CentOS 6.4 + squid-3.1.10-20.el6_5.3.x86_64 1.检查squid是否默认安装,没有安装先安装 rpm -qa squid 假 ...