HTML5 canvas jquery ImageTrans rotate做法

2011-04-17 12:19:17 by 【6yang】, 534 visits, 收藏 | 返回

DEMO 案例 : http://www.6yang.net/myjavascriptlib/canvasRotate/#

这里用到了canvas几种方法：
save：保存状态；
clearRect：清除画布；
translate：水平/垂直移动坐标；
rotate：旋转坐标；
scale：缩放坐标；
drawImage：插入图像；
restore：恢复状态。

canvas没有直接清除整个画布的方法，只能用clearRect来间接实现。
它的四个参数用来定义一个矩形，只要定义一个画布大小的矩形就能清除整个画布了。

在canvas里面没有left/top，位置的变换只能用translate来设置，程序用它把坐标移到画布中心。
canvas没有Matrix那样的东西，只能用rotate和scale来变换，用法跟css3的类似。
canvas也没有css3的skew（拉扯)变换。

最后用drawImage画图，可以是img元素、Image对象或Canvas元素，另外两个参数是画图位置，程序用它来居中图像。

每次画图都可能会改变坐标，下次想还原坐标来画图要逐个恢复会很麻烦，这时应该用save和restore来保存和还原状态。
save和restore能保存和还原包括translate、rotate、scale变换后的画布状态，常常配合clearRect来做动画。

除了以上方法，canvas还有很多属性和方法来绘图，

其它方法,资源信息:
http://www.zhangxinxu.com/wordpress/?p=552
http://www.zhangxinxu.com/study/201001/canvas-image-rotate-demo.html
http://demo.byzuo.com/v1/jq/jq-plugins-rotate/

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 canvas jquery ImageTrans rotate做法</title>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>

<style type="text/css">
body{
    font:12px/1.5 Verdana, Geneva, sans-serif;
    margin:0;
    padding:0;
    text-align:center;
}
a{
    color:#333;
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
ul,li{
    list-style:none;
    text-align:left;
    padding:0;
    margin:0;
}

* { margin: 0; padding: 0; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

.mediaWrap {
    border:1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding:0 10px 10px;
    margin:5px auto;
    width:400px;
}
.tools{
    clear:both;
    text-align:left;
    padding:10px 0;
    height:20px;
}
.tools a,
.tools em,
.tools span{
    float:left;
    line-height:17px;
}
.tools em{
    background:url(images/btn-photoCanvas.png) no-repeat 0 0;
    height:17px;
    width:15px;
}
.btnBack{
    margin:0 5px 0 0;
}
.btnPrev{
    margin:0 0 0 5px;
}
.btnPrev em{
    background-position:-17px 0;
}
.tools .btnOriginal{
    float:right;
}
.tools .btnOriginal em{
    background-position:-32px 0;
    margin:0 5px 0 0;
}
.picBox .pic{
    background:#f2f2f2;
    display:inline-block;
}
h1.title{
    font:700 14px/1.5 Verdana, Geneva, sans-serif;
    color:#060;
}
</style>
<script type="text/javascript" language="JavaScript">
$(function(){
    if($('.pohotCanvas').length > 0){
        img = new Image();
        img.src = 'images/tempGallery01.jpg';
        var ctx = $(".pohotCanvas")[0].getContext("2d"),
            angle = 90,
            clientWidth = img.width,
            clientHeight = img.height;
            n=0;
            scale = 1;
        ctx.scale(scale, scale);
        loadingImg('default');
    }
    function loadingImg(p){
            ctx.save();
            ctx.clearRect( 0, 0, clientWidth*2, clientHeight*2);
            ctx.translate( 0, 0);
            //ctx.translate( clientWidth / 2, clientHeight / 2);
            ctx.beginPath();
            //ctx.fillText("Hello, Canvas!", 20, 115);
            img.setAttribute('width', img.width);
            img.setAttribute('height', img.height);

            switch(n) {
                default :
                case 0 :
                    ctx.rotate(0 * Math.PI / 180);
                    ctx.drawImage(img, 0, 0);
                    break;
                case 1 :
                    ctx.rotate(90 * Math.PI / 180);
                    ctx.drawImage(img, 0, -img.height);
                    break;
                case 2 :
                    ctx.rotate(180 * Math.PI / 180);
                    ctx.drawImage(img, -img.width, -img.height);
                    break;
                case 3 :
                    ctx.rotate(270 * Math.PI / 180);
                    ctx.drawImage(img, -img.width, 0);
                    break;
            };
            if(p== 'left'){
                (n==3)? n=0:n++;
            }else if(p== 'right'){
                (n==0)? n=3:n--;
            }else if(p== 'default'){
                n=0;
            }
            ctx.strokeStyle = "#f30";
            ctx.restore();
    }
    $('.picBox .btnOriginal').live('click', function(){
        loadingImg('default');
    });
    $('.picBox .btnBack').live('click', function(){
        loadingImg('left');
    });
    $('.picBox .btnPrev').bind('click', function(){
        loadingImg('right');
    });
});
</script>
</head>
<body>
<h1 class="title">针对HTML5 canvas jquery ImageTrans rotate做法</h1>
<div class="mediaWrap">
    <div class="picBox">
        <div class="tools">
            <a class="btnBack" href="#"><em></em>向左转</a> <span>|</span> <a class="btnPrev" href="#"><em></em>向右转</a>
            <a class="btnOriginal" href="#~"><em></em>查看原图</a>
        </div>
        <a onClick="" class="pic" href="#~" >
            <canvas class="pohotCanvas" width="160" height="160"></canvas>
        </a>
    </div>
</div>

</body>
</html>

DEMO 案例 : http://www.6yang.net/myjavascriptlib/canvasRotate/#

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?cid=7&id=922

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

HTML5 canvas jquery ImageTrans rotate做法

图片原图