canves 图片旋转 demo

使用Canvas绘制旋转图像

最新推荐文章于 2019-06-30 00:10:31 发布

weixin_33866037

最新推荐文章于 2019-06-30 00:10:31 发布

阅读量122

点赞数

本文介绍如何利用HTML5 Canvas API实现图像的加载与显示，并通过变换坐标系来完成图像的旋转效果。文中提供了完整的示例代码，展示了如何设置绘图环境、加载图像以及应用旋转变换。

<!DOCTYPE htmls>
<html>
<head>
    <title></title>
    <style>

    </style>
</head>
<body>

    <div class="mid">
        <canvas width="600" height="400" style="background:pink"  id="canvas">
            您的浏览器当前版本不支持canvas标签
        </canvas>

    </div>

</body>
</html>
<script>

    //获取画布DOM  还不可以操作
    var canvas=document.getElementById('canvas');
    //alert(canvas);
    //设置绘图环境
    var cxt=canvas.getContext('2d');

    cxt.beginPath();
    var img = new Image();
    img.src = "./pics/psb.jpg";
    cxt.drawImage(img, 100, 100, 240, 169);
    cxt.save();

    //在异次元空间重置0,0点的位置
    cxt.translate(100,100);
    //图片/形状旋转
    //设置旋转角度  参数是弧度  角度 0-360 弧度=角度*Math.PI/180
    cxt.rotate(-30*Math.PI/180);
    var img = new Image();
    img.src = "./pics/psb.jpg";
    cxt.drawImage(img, 0, 0 , 240, 169);
    cxt.restore();

</script>