HTML5用canvas怎么实现动画效果
2个回答
2017-03-06 · 百度认证:深圳联雅网络科技有限公司
联雅网络
联雅网络成立于2005年，是一家技术开发型的网络公司，致力于高端品牌网站建设，微信公众平台开发，是一支拥有一百多人的网站设计技术团队。分深圳联雅网络与广州联雅网络，一直专注网站建设领域
向TA提问
关注
![]()
展开全部
HTML5用canvas实现动画效果的方法：
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
function animate(myRectangle, canvas, context, startTime) {
// update
var time = (new Date()).getTime() - startTime;
var linearSpeed = 100;
// pixels / second
var newX = linearSpeed * time / 1000;
if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
myRectangle.x = newX;
}
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle(myRectangle, context);
// request new frame
requestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myRectangle = {
x: 0,
y: 75,
width: 100,
height: 50,
borderWidth: 5
};
drawRectangle(myRectangle, context);
// wait one second before starting animation
setTimeout(function() {
var startTime = (new Date()).getTime();
animate(myRectangle, canvas, context, startTime);
}, 1000);
</script>
</body>
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function drawRectangle(myRectangle, context) {
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = 'black';
context.stroke();
}
function animate(myRectangle, canvas, context, startTime) {
// update
var time = (new Date()).getTime() - startTime;
var linearSpeed = 100;
// pixels / second
var newX = linearSpeed * time / 1000;
if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
myRectangle.x = newX;
}
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
drawRectangle(myRectangle, context);
// request new frame
requestAnimFrame(function() {
animate(myRectangle, canvas, context, startTime);
});
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myRectangle = {
x: 0,
y: 75,
width: 100,
height: 50,
borderWidth: 5
};
drawRectangle(myRectangle, context);
// wait one second before starting animation
setTimeout(function() {
var startTime = (new Date()).getTime();
animate(myRectangle, canvas, context, startTime);
}, 1000);
</script>
</body>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
canvas在浏览器和原生的表现：
原生调用绘图API只跟自己系统的相关API打交道;浏览器的Canvas要保持跨平台兼容性;起码要适配(编译适配)到一个或几个通用图形(字体)封装库上;并不一定能直接跟当前系统的绘制(字体)API打交道;这就一层封装消耗了;再为了把这层封装暴露成JS API又要包一层。而JS 运行效率大部分情况赶不上native导致第三层消耗，所以相对的canvas 要慢些。
cocos2d和egret等html5游戏引擎商家在浏览器里加上runtime就可以让html5游戏性能提升那么高：
cocos2d和egret等并不是在浏览器上加runtime，而是直接使用对应系统的API进行封装以及调用优化，肯定比canvas 要快，而cocos2d-html5 这种在浏览器环境内使用js封装的库来说，它最终用的还是canvas，所谓效率高只是你写的东西在使用canvas时没有做到比他们更优化(全局重绘还是局部重绘，绘制数据cache diff 等)。
原生浏览器和PC浏览器不提供类似的功能：
浏览器只是平台性质的不面向其下特定细分环境，如同操作系统一样承载软件运行，所以他们都只会提供基础(低级)API不会提供用户级的高级API，因为用户级API与实际应用场景相关性太强，canvas 就是基础touchxxx 事件等也是基础，想要用好得自己根据业务情况再次封装，如果提供了游戏引擎这种细分领域封装，那就成了游戏机系统。
原生调用绘图API只跟自己系统的相关API打交道;浏览器的Canvas要保持跨平台兼容性;起码要适配(编译适配)到一个或几个通用图形(字体)封装库上;并不一定能直接跟当前系统的绘制(字体)API打交道;这就一层封装消耗了;再为了把这层封装暴露成JS API又要包一层。而JS 运行效率大部分情况赶不上native导致第三层消耗，所以相对的canvas 要慢些。
cocos2d和egret等html5游戏引擎商家在浏览器里加上runtime就可以让html5游戏性能提升那么高：
cocos2d和egret等并不是在浏览器上加runtime，而是直接使用对应系统的API进行封装以及调用优化，肯定比canvas 要快，而cocos2d-html5 这种在浏览器环境内使用js封装的库来说，它最终用的还是canvas，所谓效率高只是你写的东西在使用canvas时没有做到比他们更优化(全局重绘还是局部重绘，绘制数据cache diff 等)。
原生浏览器和PC浏览器不提供类似的功能：
浏览器只是平台性质的不面向其下特定细分环境，如同操作系统一样承载软件运行，所以他们都只会提供基础(低级)API不会提供用户级的高级API，因为用户级API与实际应用场景相关性太强，canvas 就是基础touchxxx 事件等也是基础，想要用好得自己根据业务情况再次封装，如果提供了游戏引擎这种细分领域封装，那就成了游戏机系统。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
