加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

HTML5实现让图片围绕中心点旋转

(2012-08-09 10:37:04)
标签：

it

 分类： HTML5

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript">
function fly(){
 var myImage=document.getElementByIdx_x_x("myCanvas");
 var cxt = myImage.getContext("2d");
 var img = new Image();
 img.src="images/0.gif";
 
 //执行旋转的特效
 function spfly(){
  cxt.drawImage(img,400,700); 
  cxt.translate(-80,60);  //中心点
  cxt.rotate(-0.1);
  //clearInterval(timer);
 }
 
 var timer =setInterval(spfly,60);
}
</script>

</head>

<body >
<section >
<button onClick=" fly();">开始</button>
<canvas id="myCanvas"  width="1300" height="1000">
</canvas>

<section>

</body>
</html>

 

主要知识点就只有两个一个是要drwaImge(),二寻找中心点的方法是这个translate(),translante里的两个参数就是中心点的，这个中心点要把它设到图片的中心点位置才能让图片绕着自己的中心点旋转的

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有