HTML5中，如何控制canvas旋转图片？_随笔

要控制canvas旋转图片需要用到HTML5中canvas的rotate方法。我们通过一个具体的示例进行分析。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>你的浏览器不支持canvas元素</p>

</canvas>

</div>

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>

</body>

</html>

这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解，可以去看看，希望对你有帮助。

小米浏览器一返回刷新原因：.小米浏览器没有缓存功能，每次打开一个网页后，要返回上一页的时候，都要重新加载，不像UC一样有良好的缓存功能，非常方便，就流量不是问题，但是要等着再加载一次，希望MIUI能重视。

小米

浏览器缩放的时候，双击屏幕放大总会有些卡钝现象，没有顺滑的感觉，不像双指缩放那么顺畅（虽然第一次缩放的时候会微卡，是在网页加载页面，之后缩略图模式绽放，就没事了）。

加载网页图片的时候，是不是可以设定加载图片的质量，例如低质量，中等质量之类的，就提高加载速度（有时用禁止图片加载，来提高速度，要的是速度啊。。。。不是每个人都在用联通3G啊），毕竟图片在手机上显示的时候，精度已经没有那么重要。

在采用HTML5技术看视频禁用自动旋转屏幕时，加载的视频都是竖屏模式，最好设置成可有默认自动全屏或是横屏模式最好。看起来也方便很多，在平时禁用了屏幕自动旋转之后，看视频的时候为了全屏再打开这自动旋转，太麻烦。

欢迎分享，转载请注明来源：内存溢出

HTML5中，如何控制canvas旋转图片？