<html>
<head>
<meta charset=UTF-8>
<title>YuGiOh</title>
<style type="text/css">
*{
margin:0
padding:0
}
#div {
position: absolute
top: 50px
left: 300px
width: 300px
height: 300px
line-height: 300px
text-align: center
border: 1px solid black
border-radius: 90px
}
</style>
<script type="text/javascript">
var deg = 0
var rotateHTML5 = function(limit) {
deg += limit
deg = deg > 360 ? 1 : deg
div.style['transform'] = div.style['-webkit-transform'] = 'rotate(' + deg + 'deg)'
}
var rotateIE = function(obj) {
var d = !! obj.d ? obj.d : 1
var r = d * Math.PI / 180
costheta = Math.cos(r)
sintheta = Math.sin(r)
obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix()"
var item = obj.filters.item(0)
var width = obj.clientWidth
var height = obj.clientHeight
item.DX = -width / 2 * costheta + height / 2 * sintheta + width / 2
item.DY = -width / 2 * sintheta - height / 2 * costheta + height / 2
item.M11 = costheta
item.M12 = -sintheta
item.M21 = sintheta
item.M22 = costheta
obj.timer = setTimeout(function() {
var dx = d + 1
dx = dx > 360 ? 1 : dx
obj.d = dx
rotateIE(obj)
}, 30)
}
var start = function() {
if (!/.*MSIE.*/i.test(navigator.userAgent)) {
if ( !! div.interval) {
clearInterval(div.interval)
div.interval = null
} else {
div.interval = setInterval(function() {
rotateHTML5(1)
}, 30)
}
} else {
if ( !! div.timer) {
clearTimeout(div.timer)
div.timer = null
} else {
rotateIE(div)
}
}
}
</script>
</head>
<body>
<button onclick="start()">rotate</button>
<div id="div">ROTATE</div>
</body>
</html>
要控制canvas旋转图片需要用到HTML5中canvas的rotate方法。我们通过一个具体的示例进行分析。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片旋转</title>
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
window.onload=function() {
//1、 获取到画布对象以及画布的上下文对象
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
//2、 在画布上进行图片绘制
var img = new Image()
img.src = 'fist-pump-baby.jpg'//这里是绘制图片的路径
img.onload = function() {
context.drawImage(img, 0, 0)
}
//3、 设置画布旋转
context.rotate(0.2)//通过rotate方法以弧度为参数旋转图像
//在rotate中传入的参数为弧度。如果你对弧度不太了解，在HTML5中还提供了一个函数degreeToRadians（）。它可以将度数转换为弧度。这里传入-15，即表示将图像向左旋转15度。如需把旋转的角度转换为弧度的公式为：( 度数*PI )/ 180。这两种传入弧度的方法你选择一种即可。
//context.rotate(degreesToRadians(-15))
}
</script>
<script src="jquery.js"></script>
</body>
</html>
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解，可以去看看，希望对你有帮助。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）