canvas绘制简易动画
在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绘制简易动画的更多相关文章
- canvas绘制简易时钟
时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...
- JavaScript动画基础:canvas绘制简单动画
动画是将静止的画面变为动态的艺术.实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...
- 利用canvas绘制序列帧动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 测试canvas绘制旋转文字的性能
canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...
- canvas绘制圆角头像
如果你想绘制的网页包含一个圆弧形的头像的canvas图片,但是头像本身是正方形的,需要的方法如下:首先, 拿到头像在画布上的坐标和宽高:(具体怎么获取不在此做具体介绍) 使用canvas绘制圆弧动画 ...
- canvas+js绘制序列帧动画+面向对象
效果: 素材: 源码:(一般的绘制方式) <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 第165天:canvas绘制圆环旋转动画
canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...
- 用canvas绘制一个简易时钟
在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...
- h5学习-canvas绘制矩形、圆形、文字、动画
绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
随机推荐
- 【1】存在大于1s的FullGC
目前有存在大于1s的FullGC,金桥的机器目前是2C4G的,使用的GC方法只能使用单线程进行串行的回收,导致GC比较慢. 建议可以调整GC参数,改用CMS,能够解决这个问题, 参数修改方法: 在应用 ...
- python 小程序,输错三次密码锁定账户
[root@sun ~]# cat 7.py #!/usr/bin/python # -*- coding=UTF-8 -*- usera_name = 'usera' usera_passwd = ...
- Javascript定义变量
在JavaScript中通过var来定义变量,不管是数字还是字符串,都可以通过这种方式来定义:我们既可以在声明变量的同时给变量赋值,也可以先声明变量,再给变量赋值. <script> va ...
- B. Planning The Expedition
题目链接:http://codeforces.com/contest/1011/problem/B 题目大意: 输入的n,m代表n个人,m个包裹. 标准就是 每个人一开始只能选定吃哪一个包裹里的食物, ...
- python - 上下文管理协议(with + __enter__ + __exit__)
上下文管理协议: with + __enter__ + __exit__ #上下问管理协议: #with + __enter__ + __exit__ class Test(): def __init ...
- 【转】利用URLConnection来发送POST和GET请求
URL的openConnection()方法将返回一个URLConnection对象,该对象表示应用程序和 URL 之间的通信链接.程序可以通过URLConnection实例向该URL发送请求.读取U ...
- Udacity并行计算课程 CS344 编程作业答案
Problem set 1 // Homework 1 // Color to Greyscale Conversion //A common way to represent color image ...
- Spring+Struts+Mybatis+Shiro整合配置
Jar包
- 恶意代码分析实战-启动一个恶意的DLL
如果不能把恶意代码运行起来,那么动态分析基础技术没有什么用. Windows版本中包含rundll32.exe程序,提供了一个运行DLL的平台. rundll32.exe Dllname,Export ...
- ARMV8 datasheet学习笔记4:AArch64系统级体系结构之Self-hosted debug
1. 前言 2. 关于self-hosted debug Debugger调试器 是操作系统或系统软件的一部分,它会处理debug exception或修改debug system register, ...