利用HTML5 Canvas制作键盘及鼠标动画的实例分享

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含HTML5,Canvas,动画等相关知识,佚名希望在学习及工作中可以帮助到您

键盘控制小球移动

众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除，然后在另外一个位置重新绘制，如此反复，让静态图形按照一定的轨迹进行移动，就可以产生动画效果了。

下面，我们在canvas上绘制一个实心小球，然后用键盘上的方向键控制小球的移动，从而产生动态效果。示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5 canvas绘制可移动的小球入门示例</title>
</head>
<body onkeydown="moveBall(event)">
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//表示圆球的类
function Ball(x, y ,radius, speed){
this.x = x || 10; //圆球的x坐标，默认为10
this.y = y || 10; //圆球的y坐标，默认为10
this.radius = radius || 10; //圆球的半径，默认为10
this.speed = speed || 5; //圆球的移动速度，默认为5
//向上移动
this.moveUp = function(){
this.y -= this.speed;
if(this.y < this.radius){
//防止超出上边界
this.y = this.radius;
}
};
//向右移动
this.moveRight = function(){
this.x += this.speed;
var maxX = canvas.width - this.radius;
if(this.x > maxX){
//防止超出右边界
this.x = maxX;
}
};
//向左移动
this.moveLeft = function(){
this.x -= this.speed;
if(this.x < this.radius){
//防止超出左边界

您可能想查找下面的文章:

HTML5知识点总结
HTML5的本地存储
HTML5本地存储之IndexedDB
Html5实现文件异步上传功能
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
详解HTML5 window.postMessage与跨域
HTML5拖放API实现拖放排序的实例代码
解决html5中video标签无法播放mp4问题的办法
HTML5新特性多线程（Worker SharedWorker）
Html5新增标签有哪些

相关文章

2017-08-06HTML5中5个简单实用的API（第二篇，含全屏、可见性、拍照、预加载、电池状态）
2018-12-03HTML5离线缓存Manifest是什么_html5教程技巧
2017-08-06基于HTML5 FileSystem API的使用介绍
2018-12-03html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化&地图跳转
2018-12-03HTML5学习笔记简明版（9）：变化的元素和属性
2017-08-06HTML5打开本地app应用的方法
2018-12-03HTML5编程实战之一-实现HTML5时钟的示例代码分享
2017-08-06浅谈基于HTML5的在线视频播放方案
2018-12-03HTML5的触摸事件
2017-08-06利用HTML5 Canvas API绘制矩形的超级攻略

利用HTML5 Canvas制作键盘及鼠标动画的实例分享

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容