canves 图片旋转 demo

<!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>

posted on 2014-01-04 14:34 思齐_ 阅读(676) 评论(0) 收藏举报

C语言 c++ php mysql nginx linux lnmp lamp lanmp memcache redis 面试 笔记 ppt 设计模式 问题 远程连接

canves 图片旋转 demo

C语言 c++ php mysql nginx linux lnmp lamp lanmp memcache redis 面试笔记 ppt 设计模式问题远程连接