Canvas 动画制作
时间:2022-05-03
本文章向大家介绍Canvas 动画制作,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在前面的两篇文章Canvas 基本绘制(下)、Canvas 基本绘制(上)中,介绍了Canvas的基本绘制。学过SVG的童鞋应该知道它是可以制作动画,那么Canvas是否能制作动画呢?答案是肯定的。所以今天我们就给大家来介绍一下Canvas制作动画。
Canvas动画制作原理
简单一句话概括:不断的绘制与清除。
Canvas实现动画步骤(不断循环)
1、更新绘制的对象(比如位置的移动)
2、清除画布
3、在画布上重新绘制对象
Canvas 动画相关命令
clearRect方法
context.clearRect(x,y,width,height);方法清空给定矩形内的指定像素。
save与restore方法
所有的 2D 绘图上下文属性都是可保存和恢复的属性,但绘制的内容可不是,也就是说你恢复了绘图上下文,并不会恢复其所绘制的图形。
用来保存Canvas的状态(类似数组的入栈操作)。
用来恢复Canvas之前保存的状态(类似数组的出栈操作)。
这种状态包括:strokeStyle, fillStyle, lineWidth, lineCap, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline。
save与restore方法实例操作
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂</title>
<link rel="stylesheet" href="../css/reset.css">
<script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
<style>
.draw {
margin: 30px 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="testCanvas" width="1000" height="500" class="draw"></canvas>
<script>
var testCanvas = document.getElementById("testCanvas");
// 获取getContext()对象
var context = testCanvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(10, 10, 150, 150);
// 保存状态(红色)
context.save();
context.fillStyle="green";
context.fillRect(150, 150, 170, 170);
// 保存状态(绿色)
context.save();
// 恢复状态(红色)
context.restore();
context.fillRect(250, 250, 170, 170);
// 恢复状态(绿色)
context.restore();
context.fillRect(380, 380, 170, 170);
context.beginPath();
</script>
</body>
</html>
效果图
Canvas动画制作实例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂</title>
<link rel="stylesheet" href="../css/reset.css">
<script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
<style>
.wrap {
width: 1024px;
height: 800px;
margin: 0 auto;
}
.wrap canvas {
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="wrap">
<canvas width="1024" height="600">
您的浏览器不支持canvas!
</canvas>
</div>
<script>
var testCanvas = $("canvas")[0];
var context = testCanvas.getContext("2d");
var x = 0;
var y = 0;
var timer = null;
// 思路:进行清画布 再次绘制(循环操作)
/*
* 功能:Canvas动画绘制
* author:HTML5学堂、刘国利、陈能堡
*
*/
function draw(){
// 不断改变绘制对象的水平位置
x++;
// 清除画布
context.clearRect(0, 0, 1024, 600);
context.beginPath();
context.fillStyle = "red";
context.arc(x, 150, 100, 0, 2 * Math.PI, true);
context.closePath();
// 绘制轮廓
context.stroke();
// 填充颜色
context.fill();
}
// 设置计时器
setInterval(draw, 20);
</script>
</body>
</html>
效果图
- WPF/XML 资源及相关开源项目
- Android应用底部导航栏(选项卡)实例
- 有关 ASMX 2.0、WSE 3.0 和 WCF 的内容
- 微信小程序游戏其实一般,我也就站在寒风里玩了一个小时
- beagle MONO 应用的desktop search
- Python3与OpenCV3.3 图像处理(一)-环境搭建与简单DEMO
- winform中利用正则表达式得到有效的电话/手机号
- 浅述RDF,畅想一下FOAF应用
- 数据源控件参数类Parameter
- 我们来继续研究 mybatis 框架sql映射文件的属性
- 开源.NET邮件服务器
- 次次获得《头脑王者》满分的秘诀
- 如何在ASP.NET 2.0中定制Expression Builders
- codeproject 几篇asp.net文章
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- yunBT:一个基于TP3.1的多用户BT离线下载程序,支持在线播放
- 使用Chihaya搭建一个可以屏蔽迅雷的Tracker
- [jio本]Debian9一键安装各种下载工具
- php实现QQ小程序发送模板消息功能
- 微软自家沙盒 Sandbox公布
- php DES加密算法实例分析
- php提供实现反射的方法和实例代码
- PHP实现批量修改文件名的方法示例
- Linux VPS快速下载Bilibili视频脚本 ,支持1080P/720P/360P等格式
- PHP递归统计系统中代码行数
- PHP切割整数工具类似微信红包金额分配的思路详解
- php写入文件不覆盖的实例讲解
- php解决crontab定时任务不能写入文件问题的方法分析
- Laravel项目中timeAgo字段语言转换的改善方法示例
- php生成微信红包数组的方法