HTML5 Canvas通过JS旋转图片

最新推荐文章于 2024-03-30 23:39:25 发布

VIP文章 smartsmile2012

最新推荐文章于 2024-03-30 23:39:25 发布

阅读量4.9k

点赞数

分类专栏： JS & Jquery HTML & CSS

本文链接：https://blog.csdn.net/smartsmile2012/article/details/73530613

版权

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

最低0.47元/天解锁文章

优惠劵

smartsmile2012

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML5 Canvas通过JS旋转图片

@{ Layout = null;} Canvas 旋转图片 $(function () { var canvas = document.getElementById('canvas'); var ctx1 = canvas.getContext('2d');
复制链接

扫一扫