HTML5 Canvas通过JS旋转图片

最新推荐文章于 2025-10-26 14:34:27 发布

原创

最新推荐文章于 2025-10-26 14:34:27 发布 · 5k 阅读

3 ·

CC 4.0 BY-SA版权

这篇博客展示了如何利用HTML5的Canvas元素和JavaScript来实现图片的旋转功能。通过加载图片，设置画布坐标，然后应用旋转角度，可以将图片在页面上旋转47度。代码中详细说明了每个步骤，包括保存和恢复上下文，以及图像绘制前后的平移操作。

@{
    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 -