先看看下面的效果图，想想使用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. linuxmint 默认不启动图形界面

    1.参考:http://garyu.blog.51cto.com/2838408/513772 修改/etc/X11/default-display-manager文件 该文件的内容一般是一个路径,比 ...

  2. SQL疑难杂症【5 】大量数据查询的时候要考虑结果为空的情况

    最近几天怪事儿出奇的多,同一个工单.同一个产品,在A线可以正常生产,但是在H线死活都无法生产,系统直接提示TimeOut,监控发现有一条SQL语句执行缓慢,Copy出来仔细查看,很简单的一条语句,如下 ...

  3. CentOS6.5 安装 jdk1.7

    1.卸载centos自带的jdk # rpm -qa | grep java 结果大致为: tzdata-java-2012c-1.el6.noarch java-1.7.0-openjdk-1.7. ...

  4. [php] php图表显示

    使用jpgragh绘制php图表, 下载地址http://jpgraph.net/download/ 1> 服务器环境centos6.5, php5.0. 2> linux环境下需要配置j ...

  5. Php数据类型之整型详解

    php中支持的数据类型 在php中主要支持8种数据类型.和3中伪类型的一个形式.8种数据类型分为以下三3大类,第一个就是我们的标量类型,标量类型它只能存储单一数据,那第二大类就是我们的复合类型,第三个 ...

  6. Laravel登录验证碰到的坑 哈希验证匹配问题

    用laravel 写登录验证 本来是用Crypt加密 添加用户到数据库的 后来验证密码  解密时一直报错 The payload is invaild 由于本人是laravel框架小白 自己思考许久未 ...

  7. python核心编程第六章练习6-12

    6-12.字符串.(a)创建一个名字为findchr()的函数,函数声明如下.def findchr(string, char)findchr()要在字符串string中查找字符char,找到就返回该 ...

  8. 制作linux内核安装包

    实验基于Centos 6.2 升级linux内核 直接在一个有编译环境的设备上,编译升级内核很简单. make menuconfig 或者 拷贝现有系统的.config文件 修改.config文件  ...

  9. Java 概述

    一 Java 程序的种类 1)Java 小应用程序(Java Applet) — 在Web浏览器中运行(内嵌Java虚拟机) —特定标记 <APPLET CODE="HelloWorl ...

  10. Python中 filter | map | reduce | lambda的用法

      1.filter(function, sequence):对sequence中的item依次执行function(item),将执行结果为True的item组成一个List/String/Tupl ...