在canvas画布中制作动画相对来说很简单，实际上就是不断变化的坐标、擦除、重绘的过程

1、使用setInterval方法设置动画的间隔时间。

setInterval(code,millisec) setInterval方法html中固有方法，这个方法接受两个参数，第一个函数表示执行动画的函数，第二个参数为间隔时间，单位是（毫秒）。

2、用来绘图的函数

1）通过不断变换X和Y的坐标实现动画的效果。

2）在该函数中先用clearRect方法将画布整体或者局部擦除。

擦除图像clearRect方法：

context.clearRect(x,y,width,height);

x是指我们起点的横坐标，y是指我们起点的纵坐标，width是指擦子的长度，height是指擦子的高度。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>canvas绘制动画</title>

        <script src="js/canvas.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body onload="draw('canvas')">

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

    </body>

</html>
var context;

var i,j;

var width,height;

function draw(id){

    var canvas = document.getElementById(id);

    context = canvas.getContext('2d');

    width = canvas.width;

    height = canvas.height;

    context.fillStyle = 'green';

    context.fillRect(0,0,width,height);

    setInterval(painting,100);

    i = 0;

    j = 0;

}

function painting(){

    //例子一：

    //context.fillStyle = 'red';

    //context.fillRect(i,i,10,10);

    //context.fillRect(i,200-j,10,10);

    //i++;

    //j++;

    //例子二：

    context.fillStyle = 'white';

    context.clearRect(i,20,1,10);

    i++;

}

canvas绘制简易动画的更多相关文章

  1. canvas绘制简易时钟

    时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...

  2. JavaScript动画基础：canvas绘制简单动画

    动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

  3. 利用canvas绘制序列帧动画

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 测试canvas绘制旋转文字的性能

    canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...

  5. canvas绘制圆角头像

    如果你想绘制的网页包含一个圆弧形的头像的canvas图片,但是头像本身是正方形的,需要的方法如下:首先, 拿到头像在画布上的坐标和宽高:(具体怎么获取不在此做具体介绍) 使用canvas绘制圆弧动画 ...

  6. canvas+js绘制序列帧动画+面向对象

    效果: 素材: 源码:(一般的绘制方式) <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  8. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

  9. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

随机推荐

  1. layui（一）——layDate组件常见用法

    和 layer 一样,我们可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,可按照实际需求来选择.options整理如下: layui.use('laydate', f ...

  2. 解决win10无线无故断网,重启才恢复正常的情况【原】

    最初以为是路由器问题 ,但是别人电脑都好好的呀,而且我自己的手机也是好好的能正常上网,所以只能从自身电脑找问题了,目测就是无线网卡出问题了.经过一番百度,原来是win10自动开启了省模式,运行一段时间 ...

  3. Zabbix LLD 设置过滤条件，不自动监控某些item

    1.需求描述        默认情况下Zabbix 自带模板 "Template OS Linux" 中网络接口LLD自动发现除还回接口外的所有接口,当这并不一定是我们想要的结果. ...

  4. C++ STL sort()函数用法

    C++STL提供的在里的排序函数,有以下两种形式 此外还提供有稳定排序版本stable_sort(),用法类似. 第一种形式: template <class RandomAccessItera ...

  5. 如何使用Ajax从FastReport Web API获取报表

    在文章“如何在ASP.NET Web API中使用FastReport.Net”中,我们已经讨论了如何创建一个用于生成报表的Web服务.然后我们会收到报表的链接,现在我们来看看如何获​​取报表并使用a ...

  6. 22. SpringBoot 集成 Mybatis

    1. 引入Mybatis的maven 依赖 <dependency> <groupId>org.mybatis.spring.boot</groupId> < ...

  7. 五、u-boot 启动流程---u-boot.lds

    5.1 u-boot.lds  链接脚本分析 uboot 编译出来的第一个链接脚本就是执行 u-boot.lds 链接脚本,去掉里面无用的和没有定义的,进行分析. /* 配置头文件,自动生成的,包含芯 ...

  8. 攻击WEP加密无线网络

    1.介绍 针对客户端环境和无客户端环境下破解WEP的几类方法. 有客户端环境: 一般当前无线网络中存在活动的无线客户端环境,即有用户通过无线连接到无线AP上并正在进行上网等操作时. 无客户端环境: 1 ...

  9. Nginx PHP支持

    Nginx 支持 PHP server { server_name www.www1.com www1.com; location / { index index.php index.html; ro ...

  10. Sqoop异常:Exception in thread "main" java.lang.NoClassDefFoundError: org/json/JSONObject

    18/12/07 01:09:03 INFO mapreduce.ImportJobBase: Beginning import of staffException in thread "m ...