您的位置：首页 > Web前端 > JavaScript

HTML5 Canvas通过JS旋转图片

2017-06-21 11:48 459 查看

@{
Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<title>Canvas 旋转图片</title>
<script type="text/javascript">
$(function () {
var canvas = document.getElementById('canvas');
var ctx1 = canvas.getContext('2d');
var image1 = new Image();
image1.onload = function () {
var xpos = canvas.width / 2;
var ypos = canvas.height / 2;
//原图
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
ctx1.save();
//旋转图
ctx1.translate(xpos, ypos);
ctx1.rotate(47 * Math.PI / 180);//旋转47度
ctx1.translate(-xpos, -ypos);
ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
ctx1.restore();
}
image1.src = '../../Images/people.jpg';
});
</script>
</head>
<body>
<div>
<canvas id="canvas" width="800" height="600">
<b>浏览器不支持时显示部分</b>
</canvas>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航