怎样应用HTML5 canvas扭转图片？（实例演示）-百分百源码网

怎样应用HTML5 canvas扭转图片？（实例演示）

发布时间：10/01 来源：未知浏览：关键词：

比来忽然想研讨一下js扭转图片的功效。关于此前的实现方式，就不先说了。此刻HTML5很不错，主要理解一下HTML5中的图片扭转吧。

实例演示：
http://www.imqing.com/demo/rotateImg.html

道理：利用canvas对象来扭转。

实现方式：第一创立一个canvas元素，然后把img元素绘入canvas。但是，实际上，这是默许状况，就是图片没扭转时。假如图片要扭转90度的话，就需要先把canvas画布扭转90度后再画图。

描写如下：

内部扭转道理是这样的，图片的坐标是从左上角开端运算，向右为x正标的目的，向下为y正标的目的，在扭转画布canvas时，实际上是这个坐标在扭转，所以最后画图方式不一样。

当时我还用了picpick来测量扭转必然角度后起点坐标，才知道本来扭转是这样的。

代码：

<body>  
    <button onclick="rotateImg('testImg', 'left')">向左扭转</button>  
    <button onclick="rotateImg('testImg', 'right')">向右扭转</button><br/>  
    <img src="./test.jpg" id="testImg"/>  
<script>  
    function rotateImg(pid, direction) {  
        //最小与最大扭转标的目的，图片扭转4次后回到原标的目的  
        var min_step = 0;  
        var max_step = 3;  
        var img = document.getElementById(pid);  
        if (img == null)return;  
        //img的高度和宽度不克不及在img元素潜藏后猎取，不然会出错  
        var height = img.height;  
        var width = img.width;  
        var step = img.getAttribute('step');  
        if (step == null) {  
            step = min_step;  
        }  
        if (direction == 'right') {  
            step++;  
            //扭转到原位置，即超越最大值  
            step > max_step && (step = min_step);  
        } else {  
            step--;  
            step < min_step && (step = max_step);  
        }  
        img.setAttribute('step', step);  
        var canvas = document.getElementById('pic_' + pid);  
        if (canvas == null) {  
            img.style.display = 'none';  
            canvas = document.createElement('canvas');  
            canvas.setAttribute('id', 'pic_' + pid);  
            img.parentNode.appendChild(canvas);  
        }  
        //扭转角度以弧度值为参数  
        var degree = step * 90 * Math.PI / 180;  
        var ctx = canvas.getContext('2d');  
        switch (step) {  
            case 0:  
                canvas.width = width;  
                canvas.height = height;  
                ctx.drawImage(img, 0, 0);  
                break;  
            case 1:  
                canvas.width = height;  
                canvas.height = width;  
                ctx.rotate(degree);  
                ctx.drawImage(img, 0, -height);  
                break;  
            case 2:  
                canvas.width = width;  
                canvas.height = height;  
                ctx.rotate(degree);  
                ctx.drawImage(img, -width, -height);  
                break;  
            case 3:  
                canvas.width = height;  
                canvas.height = width;  
                ctx.rotate(degree);  
                ctx.drawImage(img, -width, 0);  
                break;  
        }  
    }  
</script>  
</body>

说明：canvas.width与height就不消说明了吧，应当。rotate应当也不消吧？关键是drawImage(img, x, y);

其中的x，y是指从哪一点开端画，由于整个坐标系统扭转了，所以，x，y不一样，比方step=1，图片向右扭转了90度，即坐标系扭转了90度，那么起始位置应当是x = 0, y= img.height

以上就是怎样利用HTML5 canvas扭转图片？（实例演示）的具体内容，更多请关注百分百源码网其它相关文章！

打赏