html5 canvas写一个图片围绕图片中心一直旋转的代码，用translate和rotate方法 30
html5canvas写一个图片围绕图片中心一直旋转的代码，用translate和rotate方法...
html5 canvas写一个图片围绕图片中心一直旋转的代码，用translate和rotate方法
展开
4个回答
展开全部
一定要用canvas吗？这里给你一个代码，看看能不能参考一下，有必要你模仿着改成canvas咯。
上代码(图片自己找一张)：
<html>
<head>
<style>
#rotate_img {
margin: 100px;
}
</style>
</head>
<body>
<button onclick="rotate()">开始旋转</button>
<button onclick="pause()">暂停旋转</button>
<!--这里自己找张图片，路径写对就行-->
<img src='photo.jpg' id='rotate_img'/>
</body>
</html>
<script>
<!--
var x, n=0, rotINT;
function rotate() {
x = document.getElementById("rotate_img");
clearInterval(rotINT);
rotINT = setInterval("startRotate()",10);
}
function pause () {
clearInterval(rotINT);
}
function startRotate() {
n = n + 1;
x.style.transform = "rotate(" + n + "deg)";
x.style.webkitTransform = "rotate(" + n + "deg)";
x.style.OTransform = "rotate(" + n + "deg)";
x.style.MozTransform = "rotate(" + n + "deg)";
if (n == 180 || n == 360) {
if (n >= 360){
n = 0;
}
}
}
//-->
</script>
上代码(图片自己找一张)：
<html>
<head>
<style>
#rotate_img {
margin: 100px;
}
</style>
</head>
<body>
<button onclick="rotate()">开始旋转</button>
<button onclick="pause()">暂停旋转</button>
<!--这里自己找张图片，路径写对就行-->
<img src='photo.jpg' id='rotate_img'/>
</body>
</html>
<script>
<!--
var x, n=0, rotINT;
function rotate() {
x = document.getElementById("rotate_img");
clearInterval(rotINT);
rotINT = setInterval("startRotate()",10);
}
function pause () {
clearInterval(rotINT);
}
function startRotate() {
n = n + 1;
x.style.transform = "rotate(" + n + "deg)";
x.style.webkitTransform = "rotate(" + n + "deg)";
x.style.OTransform = "rotate(" + n + "deg)";
x.style.MozTransform = "rotate(" + n + "deg)";
if (n == 180 || n == 360) {
if (n >= 360){
n = 0;
}
}
}
//-->
</script>
追问
亲，谢谢你，但不是我想要的，HTML5的CANVAS不像CSS3那样简单的
追答
嗯，抱歉没帮到你。以前我也很喜欢canvas,后来慢慢接触移动web app,感觉很多东西没必要用canvas。那你在百度上搜一下，应该很多现成的。
来自：求助得到的回答
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas</title>
<script type="text/javascript">
function fly(){
var myImage=document.getElementById("myCanvas");
var cxt = myImage.getContext("2d");
var img = new Image();
img.src="http://www.baidu.com/img/bd_logo1.png";
//执行旋转的特效
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>
这样就可以了
document.getElementByIdx_x_x 是自定义方法
改成js的document.getElementById就好了
然后图片路径也要对
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas</title>
<script type="text/javascript">
function fly(){
var myImage=document.getElementById("myCanvas");
var cxt = myImage.getContext("2d");
var img = new Image();
img.src="http://www.baidu.com/img/bd_logo1.png";
//执行旋转的特效
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>
这样就可以了
document.getElementByIdx_x_x 是自定义方法
改成js的document.getElementById就好了
然后图片路径也要对
追问
不是这个效果，是围绕图片中心点转哦
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/plain" charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid blue">
Your browser does not support the canvas element.
</canvas>
</body>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.width=400; //画板大小
c.height=400;
var img=new Image();
img.src="b7e6ce04.jpg";//要加载的图片
ctx.translate(200,200);//重设中心点
t=window.setInterval(function(){
ctx.clearRect(-200,-200,600,600);//清除之前
ctx.rotate(5*Math.PI/180);//旋转角度
ctx.drawImage(img,-80,-80);//绘制图片 设置好图片中心点
},1000);//旋转速度
</script>
</html>
追问
亲，图片并没有围绕图片中心点转哦
追答
ctx.translate(200,200);
ctx.drawImage(img,-80,-80);
数据设置问题 计算下该镇么填
方法是没问题的 我测试了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你只要将div换成img就行了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: yellow;
animation:myfirst 5s linear 2s infinite alternate;
-webkit-animation:myfirst 5s linear 0s infinite normal;
-moz-animation: myfirst 5s linear 0s infinite normal;
-o-animation: myfirst 5s linear 0s infinite normal;
}
@keyframes myfirst{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div style=""></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: yellow;
animation:myfirst 5s linear 2s infinite alternate;
-webkit-animation:myfirst 5s linear 0s infinite normal;
-moz-animation: myfirst 5s linear 0s infinite normal;
-o-animation: myfirst 5s linear 0s infinite normal;
}
@keyframes myfirst{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div style=""></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
