■概要
・HTML5のCanvasタグを使って回転しているボールを描くサンプルである。
■要点
・setIntervalを利用し、定時的にメソッドを呼ぶ
・contextのtranslate、rotate、drawImage、save、restoreを利用し、回転、イメージを描く
■ソース
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ball</title>
</head>
<body>
<div style="text-align:center;">
<canvas id="testCanvas" width="500" height="300" style="border:1px solid #1111AA;"></canvas>
</div>
<br>Debug Space<br>
<textarea id="debugDiv" style="border:1px solid #1111AA;width:500;height:150;font-size:small"></textarea>
<script type="text/javascript">
var dncsoft;
if (!dncsoft) dncsoft = {};
dncsoft.Debug = function() {};
dncsoft.Debug.prototype = {
debug : function(p_msg) {
var debugDiv = document.getElementById('debugDiv');
if ( ! debugDiv ) return false;
debugDiv.value = debugDiv.value + p_msg + "\n";
},
clear : function() {
debugDiv.value = "";
}
};
var g_log = new dncsoft.Debug();
g_log.clear();
//-----------------------------------------------
// dncsoft.Board
//-----------------------------------------------
dncsoft.Board = function() {};
dncsoft.Board.prototype = {
_ctx : null,
getCtx : function() {
return _ctx;
},
init : function() {
_width = 500;
_height = 300;
_canvas = document.getElementById('testCanvas');
if ( ! _canvas || ! _canvas.getContext ) return false;
_ctx = _canvas.getContext('2d');
},
draw : function() {
_ctx.beginPath();
_ctx.fillStyle = "#EEEEEE";
_ctx.fillRect(0, 0, _width, _height);
}
};
//-----------------------------------------------
// dncsoft.Ball
//-----------------------------------------------
dncsoft.Ball = function() {
this._angle = 45;
this._x = 0;
this._y = 0;
};
dncsoft.Ball.prototype = {
_angle :45,
_x :0,
_y :0,
getAngle : function() {
return this._angle;
},
setAngle : function(p_angle) {
this._angle = p_angle;
},
init : function(p_ctx, p_angle) {
this._x = 200;
this._y = 100;
_radius = 32;
_speed = 1;
_rotate = 2;
_img = new Image();
_img.src = "magic_ball.png";
_ctx = p_ctx;
this._angle = p_angle;
},
draw : function() {
_rotate = (_rotate + 1) % 360;
_ctx.save();
_ctx.translate(this._x, this._y);
_ctx.rotate(_rotate/180 * Math.PI);
_ctx.translate(-16, -16);
_ctx.drawImage(_img, 0, 0, _radius, _radius);
_ctx.restore();
this._x = this._x + (5 * Math.sin(this._angle/180 * Math.PI));
this._y = this._y + (5 * Math.cos(this._angle/180 * Math.PI));
_rotate = _rotate + 4;
this.calcPath();
},
calcPath : function() {
if (this._x < 16) {
this._angle = 360 - this._angle;
} else if (this._x > 500 - 16) {
this._angle = 360 - this._angle;
} else if (this._y < 16) {
this._angle = 180 - this._angle;
} else if (this._y > 300 - 16) {
this._angle = 180 - this._angle;
}
this._angle = this._angle % 360;
}
};
//-----------------------------------------------
// main
//-----------------------------------------------
var g_board;
var g_ball;
var g_counter;
var g_timerDrawID;
window.onload = function() {
g_counter = 1000;
g_board = new dncsoft.Board();
g_board.init();
g_ball = new dncsoft.Ball();
g_ball.init(g_board.getCtx(), 30);
g_timerDrawID = setInterval("ballMove()", 25);
};
function ballMove() {
g_board.draw();
g_ball.draw();
g_counter--;
if (g_counter <= 0) clearInterval(g_timerDrawID);
}
</script>
</body>
</html>
■結果
- 大小: 6 KB
- 大小: 15.5 KB
分享到:
相关推荐
内容概要:canvas案例,loading动画。加载动画。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
主要介绍了利用HTML5 Canvas制作键盘及鼠标动画的实例,文中分别分享了一个键盘控制的小球移动和鼠标触发的小丑小脸例子,需要的朋友可以参考下
主要介绍了HTML5 Canvas旋转动画的2个代码例子,实现了一个旋转的太极图效果,学习HTML5 Canvas旋转动画的朋友可以参考下
目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等,因此,在运行本页中的例子时,请确保你使用的是上述浏览器之一。 尽管在 Mozilla 已经有不少关于 Canvas 的教程,我还是决定把自
css动画实现落叶效果
<canvas>是一个新的HTML元素,这个元素在中被...目前支持canvas元素的浏览器有Firefox3+、Safari4、Chrome2.0+等,因此,在运行本页中的例子时,请确保你使用的是上述浏览器之一。 尽管在Mozilla已经有不少关于Canvas
一、源码描述 该源码主要是一些Html5特效源码... HTML5 Canvas可拖动的弹性大树摇摆动画三个小例子。 三、注意事项 1、开发环境为Visual Studio 2010,无数据库, 使用.net 4.0开发。 2、该源码仅供学习交流使用。
一、基本概念 ...目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等,因此,在运行本页中的例子时,请确保你使用的是上述浏览器之一。 尽管在 Mozilla 已经有不少关于 Canvas 的
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的动画给实现了...
小编以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现。 PS:由于显卡、录制的帧间隔,以及可能你电脑处理器的原因...
HTML5 SVG绘制大树,这个例子的动画效果可以让你感觉到一棵大树的生长过程,树叶慢慢长出来,最后成了一棵茁壮的大树,这是使用的SVG技术,和Canvas相比,SVG似乎更强大。
程序动画使用代码通过JavaScript和HTML Canvas制作动画电影。 导出为WebM视频文件(Safari不支持)。 这些示例使用捕获视频帧。例子 使用 使用 分享您的工作! 如果您根据这些示例制作自己的动画,请与#...
HTML5-故事书PBS KIDS HTML5 故事书引擎允许用户快速开发具有动画和音频的跨平台交互式故事书。 主要特征: 混合使用 DOM 和 Canvas 元素来允许响应式图像、文本和动画。 基于精灵的动画移动音频的音频精灵跨平台轻...
期间用到了Canvas制作动画,我这边就简单做了个动态粒子连线的例子与大家分享。 一、效果图 二、思路如下: 1.绘制随机区域的粒子,记录每个粒子x轴、y轴坐标以及x轴与y轴每次移动的距离 2.通过定时函数使得粒子...
今天在学习《HTML5+Javascript动画基础》这本书的时候,在第八章的第三节讲到如何用三个弹簧连接三个点来做拉伸运动。 在做完例子之后,就想到如果是四个点,五个点,怎么样。 就改写了一下代码,把点的数目变量化。...
EaselJS是一个用于在HTML5中构建高性能交互式2D内容的库。 它提供了功能丰富的显示列表,可让您对图形进行操作和动画处理。 它还为鼠标和触摸交互提供了强大的交互模型。 它非常适合构建游戏,生成艺术,广告,...
编写动画函数 定义html结构 这里只需要一个 canvas 元素就可以了。 <html> <body> <canvas id=myCanvas width=900 height=600 xss=removed></canvas> </body> </html> 拆分图片 这...
CCapture.js-捕获基于画布的动画的库CCapture.js是一个库,可帮助捕获以固定帧速率使用HTML5 canvas创建的动画。一个例子可能值得一提: 。什么是CCapture.js,为什么我需要它? 假设您终于在浏览器中运行了令人惊叹...