先看看下面的效果图，想想使用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. file_get_contents微信头像等待时间过长的原因

    UPDATE 2016/05/13 stackoverflow上的解决方法:http://stackoverflow.com/questions/3629504/php-file-get-conten ...

  2. UVa 12299 RMQ with Shifts（移位RMQ）

    p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: "Times New ...

  3. poj 3321 Apple Tree dfs序+线段树

    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K       Description There is an apple tree outsid ...

  4. 安装openJDK 8

    1.JDK 8 示例 (1.1)Debian, Ubuntu等使用下述安装命令: $ -jre ps : openjdk-8-jre 仅包含JRE,如果需要开发java程序,需要下载openjdk-8 ...

  5. composer安装fxp插件时候提示内存不足且没有交换空间的解决办法

    The following exception is caused by a lack of memory and not having swap Check https://getcomposer. ...

  6. window.onload()和$(function(){});的区别

    1.window.onload必须等到页面中所有元素加载完之后才会执行(包括图片.视频等)而$(function(){});是在结构绘制完毕之后执行,二者的执行时机是不同的,一般来说后者会首先执行 2 ...

  7. Head First 设计模式 --7 适配器模式 外观模式

    适配器模式:将一个类东街口转换成客户期望的另一个接口.适配器让原本接口不兼容的类可以合作无间. 适配器模式有两种,对象适配器和类的适配器.先看一下对象适配器. 还是看最开始鸭子的例子,如果此时鸭子不够 ...

  8. 手机号 和 email 的正则匹配

    手机号   /^1[3|4|5|8] \d{9}$/ email  /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/

  9. cygwin编译环境小记

    [gcc] 预定义宏 编译器通常会根据平台和编译选项的不同,为被编译的程序提供不同的预定义的宏, 例如WIN32 WIN64 LINUX, 例如DEBUG, RELEASE. 1. 在使用gcc/g+ ...

  10. HTML5和CSS3登录页面制作实录

    本文详细介绍使用HTML5 和CSS3 制作一个登录页面的完整过程. View demo login.html <form id="login"> <h1> ...