html5 canvas写一个图片围绕图片中心一直旋转的代码，用translate和rotate方法

推荐答案 2015-07-20

一定要用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>

</script>追问

亲，谢谢你，但不是我想要的，HTML5的CANVAS不像CSS3那样简单的

追答

嗯，抱歉没帮到你。以前我也很喜欢canvas,后来慢慢接触移动web app,感觉很多东西没必要用canvas。那你在百度上搜一下，应该很多现成的。

来自：求助得到的回答

温馨提示：答案为网友推荐，仅供参考

当前网址：http://77.wendadaohang.com/zd/YvGG3WWpq8W8Iqqp3Yp.html

其他回答

第1个回答 2015-07-20

<!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就好了
然后图片路径也要对追问

不是这个效果，是围绕图片中心点转哦

本回答被网友采纳

第2个回答 2015-07-20

<!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);
数据设置问题计算下该镇么填
方法是没问题的我测试了

第3个回答 2017-07-07

你只要将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>

相似回答

问一个HTML5关于旋转的问题答：你的js代码开始的那句oGC.translate(100,100);改变了绘图的原点，虽然你清除的图形宽高设置够；所以你clearRect清楚画布的时候只清除了一点点；正确写法oGC.clearRect(0,0,oC.width,oC.height)；你可以吧其余代码注释掉看下clearRect的图形在哪里 oGC.save(); oGC.fillRect(-100,-100,oC.width,...

哪位帮忙解释一下图片九十度旋转的代码啊,怎么让它可以逆时针旋转,下 ...答：object.replaceChild(canvas,image);var context = canvas.getContext("2d");context.translate(176, 0);context.rotate2(Math.PI*0.5);context.drawImage(image,0,0);} }catch(e){} } } </script> <input type="button" value="顺时针转" onClick="rotate(document.getElementById('myimg'...

怎么用html5的canvas实现箭头随着鼠标移动和旋转答：dx); arrow.draw(context); }()); }; </script> </body></html>var canvas=document.getElementById(“canvas”)//即将变量 canvas 作为对 html5 canvas标签id为’canvas’ 的引用context=canvas.getContext(‘2d’)//获取canvas该对象后，可在其上进行图形绘制 window.requestAnimation...

如何用HTML5 的Canvas制作3D动画效果答：//把自己绘制出来的方法，包括功能：水平翻转 draw:function(canvas,ctx){ //存储canvas状态ctx.save();//实现透明度的改变 ctx.globalAlpha=this.alpha;//实现水平竖直翻转，定义drawImage的两个位置参数dx，dy vardx=this.loca.x;vardy=this.loca.y;if(this.scale.x!=1||this.scale.y!=1){ ...

如何用Canvas绘制多种图形答：英文中 Canvas 的意思是“画布”,不过这里说的 Canvas 是 HTML5 中新出的一个元素,开发者可以在上面绘制一系列图形。Canvas 在 HTML 文件中的写法很简单:<canvas id="canvas" width="宽度" height="高度"></canvas>其中id 属性是所有 HTML 元素都可以用的,Canvas 自带的属性只有后面两个(分别控制宽度、高度...

Graphic2D中的rotate方法应用问题答：rotate = new JButton("逆旋"); // 每按一次逆时针旋转90度 rotate.setBounds(5, 405, 390, 90);frame.getContentPane().add(rotate);rotate.addActionListener(this);} public static void main(String[] args) { new DrawImage();} public void actionPerformed(ActionEvent e) { panel.set...

安卓编程如何为一个图片加上透明度和平移两个动画答：1.创建Android工程;2.导入一张图片资源;3.在res/layout/main.xml中添加一个 ImageView Widget;4.在res下创建新的文件夹且命名为:anim,并在此文件夹下面定义 Animation XML 文件;5.修改OnCreate()中的代码,显示动画资源;关键代码,解析如下://main.xml中的ImageViewImageView spaceshipImage = (ImageView) find...

大家正在搜

html中canvas什么用 html canvas 绘图 html5 大量 canvas html5canvas用途 html2canvas vue html canvas 开发工具 html2canvas中文文档 canvas添加html5 html5canvas输出