先看看下面的效果图，想想使用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. HTML布局与框架

    HTML块 HTML块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> <!DOCTYPE html> <html> ...

  2. python_way ,day25 wmi

    pip install wmi  如果不能安装,就使用 安装 python3 -m pip install wmi 再安装pywin32这个包 使用: import platform import w ...

  3. WIN10图标显示异常

    1.打开控制面板,右上边查看方式选择边小图标显示 2.打开显示里面的自定义缩放级别 3.设置级别为125%  然后点击 应用 4.注销或者重启,然后将异常的快捷方式点击打开,就会恢复正常,至少我的是回 ...

  4. JS中的各种类型转换规则(转)

    JS中的类型转换非常恶心,大家都懂的,不过该学还是要学. 今天看犀牛书看到了转换规则,总结出来. X转字符串.数字.布尔值 X表示各种类型的值,直接上图: 值 转数字 转字符串 转布尔值 undefi ...

  5. （原创）IP协议Header部分的Checksum计算方法

  6. 学习mongo系列（十一）关系

    准备工作:首先在maxh数据库的address集合中先插入数据 > db.address.insert({child_address:"gansu"}) WriteResul ...

  7. 【ros bug】rplidar.launch is neither a launch file in package...

    解决 :cd catkin_ws $ source devel/setup.bash

  8. js高级程序设计（七）函数表达式

    定义函数的方式有两种:一种是函数声明,另一种就是函数表达式.函数声明的语法是这样的. function functionName(arg0, arg1, arg2) { //函数体 } Firefox ...

  9. JS判断数组中是否有重复元素的方法

    判断数组中是否有重复元素,最容易想到的方法是使用2重循环,逐个遍历,比较,但是这个是最慢,最笨的方法,百度得出了更好的方法. var ary = new Array("111",& ...

  10. Install PaddlePaddle (Parallel Distributed Deep Learning)

    Step 1: Install docker on your linux system (My linux is fedora) https://docs.docker.com/engine/inst ...