1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8" />
  5.   <title>canvas</title>
  6.   <style type="text/css">
  7.     canvas {
  8.       border: 1px solid red;
  9.     }
  10.   </style>
  11. </head>
  12. <body>
  13.     <canvas id="myCanvas"  width="600px" height="400px">
  14.       您的浏览器不支持canvas
  15.     </canvas>
  16.     <script  type="text/javascript">
  17.         var canvas = document.getElementById('myCanvas');
  18.         var ctx = canvas.getContext('2d');
  19.  
  20.         var posx = 0, posy = 0, dir = 1, isMouseInRect = false;
  21.  
  22.         canvas.onmousemove = function(e){
  23.             var mouseX = e.offsetX;
  24.             var mouseY = e.offsetY;
  25.             if(mouseX > posx && mouseY <posx +50 && mouseY > posy && mouseY < posy+ 50){
  26.                 isMouseInRect = true;
  27.             }else{
  28.                 isMouseInRect = false;
  29.             }
  30.         }
  31.  
  32.         setInterval(function() {
  33.             if(!isMouseInRect){
  34.                 posx += 10 * dir;
  35.             }
  36.             //clearRect清空画布的一个矩形区域
  37.             ctx.clearRect(0, 0, canvas.width, canvas.height);
  38.             ctx.fillRect(posx, posy, 50, 50);
  39.             if(posx + 50 >= canvas.width){
  40.                 dir = -1;
  41.             }else if(posx <= 0){
  42.                 dir = 1;
  43.             }
  44.         },100);
  45.  
  46.     </script>
  47. </body>
  48. </html>

canvas——动画实例的更多相关文章

  1. canvas动画:自由落体运动

    经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...

  2. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  3. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  4. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  5. 2015.4.23 贪吃蛇、canvas动画，各种上传工具，url信息匹配以及最全前端面试题等

    1.面向对象贪吃蛇   2.css中:hover 改变图片 页面加载完 第一次鼠标移入会闪一下 这是为啥? 解决方法:你把两张图合成一张图或者是先把图片加载到页面上,然后再hover出来. 解析:图片 ...

  6. HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

     1.js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame 2.css3 3.svg 4.canvas(当然,这个还是要配合js)   也许这么 ...

  7. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  8. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  9. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

随机推荐

  1. python中的常用内建属性与内建函数

    常用专有属性常用专有属性 说明 触发方式 __init__ 构造初始化函数 创建实例后,赋值时使用,在__new__后 __new__ 生成实例所需属性 创建实例时 __class__ 实例所在的类 ...

  2. Python实用案例，Python脚本，Python实现帮你选择双色球号码

    往期回顾 Python实现自动监测Github项目并打开网页 Python实现文件自动归类 前言: 今天我们就利用python脚本实现帮你选择双色球号码.直接开整~ 开发工具: python版本: 3 ...

  3. 直接使用！安装WordPress一键部署轻松建站教程

    关于 WordPress WordPress (opens new window)简称WP,最初是一款博客系统,后逐步演化成一款功能强大的企业级 CMS(内容管理/建站系统),目前是公认的全球最佳建站 ...

  4. python编写DDoS攻击脚本

    python编写DDoS攻击脚本 一.什么是DDoS攻击 DDoS攻击就是分布式的拒绝服务攻击,DDoS攻击手段是在传统的DoS攻击基础之上产生的一类攻击方式.单一的DoS攻击一般是采用一对一方式的, ...

  5. 软件安装管理（RPM）

    目录 一.linux应用程序 1.1 应用程序与系统命令关系 1.2 典型应用程序的目录结构 1.3 常见的软件包封装工具 二.RPM软件包管理工具 2.1RPM软件包管理器Red-Hat Packa ...

  6. C# WinForm 数据库连接及对数据库的相关操作

    1.首先在App.config配置文件中配置数据库连接字符串: <appSettings> <add key="connectionstring" value=& ...

  7. Ubuntu开启SSH端口并且搭建Vulhub环境

    1.下载好ubuntu.开启SSH: * sudo apt update * sudo apt install openssh-server * sudo systemctl status ssh 用 ...

  8. Python脚本文件中使用中文

    Python做图形用户界面(GUI)开发时经常要在界面上显示中文,需要做如下处理(详见[1]和[2]2.3节): 在py文件的首行写上:# -- coding:utf-8 -- 保存py文件时要存为u ...

  9. 删除EFI系统分区（ESP）后Windows无法启动，重建引导分区并修复启动的过程

    @ 目录 一.开机故障描述 二.工具: 三.什么是EFI系统分区 四.如何查看EFI系统分区 五.删除后如何重建系统分区 1.建立未分配空间 2.建立ESP分区 3.按下图,ESP分区的大小200M即 ...

  10. SpringBoot开发八-会话管理

    需求介绍-会话管理 利用Cookie和Seesion使得HTTP变成有会话的连接,写几个实例演示一下 代码实现 先写个例子,表示客户端第一次访问服务器,服务器端创建一个Cookie发送给客户端. 不管 ...