canvas实现图片旋转缩放

来源：互联网发布：香港御可贡茶加盟知乎编辑：程序博客网时间：2024/05/19 12:16

canvas实现图片旋转，用到的基本函数：
rotate（）实现旋转；
scale（X,Y）实现缩放，X代表水平缩放，Y代表垂直缩放；
translate（X,Y）为画布的变换矩阵添加水平的和垂直的偏移；

基本思路：用rotate（）方法实现图片旋转，用scale（）实现缩放。rotate（）旋转的时候是以左上角为顶点进行旋转，如果想以图片中心为定点旋转，用translate（）将点定位到图片中心就好。

本例子以一个黑色矩形来模拟图片，实现类似的效果。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style>            body{background: black;}            #myCanvas{background: white;}        </style>    </head>    <body>        <canvas id="myCanvas" width="400" height="400"></canvas>    </body>    <script>        window.onload = function(){            var oC = document.getElementById("myCanvas");            var OGC = oC.getContext("2d");            //将方块起始点向左向下移动100单位            OGC.translate(100,100);            //OGC.rotate(45*Math.PI/180);             //旋转以顶点为中心点，旋转会累加            //等同于旋转45度            OGC.rotate(20*Math.PI/180);            OGC.rotate(25*Math.PI/180);             OGC.scale(2,2);    //等比放大，宽放大2倍，高放大两倍            OGC.fillRect(0,0,100,100);        }    </script></html>

基本效果如果图示：方块等比放大2倍，并旋转45度；
这里写图片描述

接下来通过计时器，让这个方框动起来，在用计时器的时候每次开始要先保存绘制路径，并清除画布大小，结束的时候要用restore()方法清除本次的绘图，保持始终是一个方框在动。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style>            body{background: black;}            #myCanvas{background: white;}        </style>    </head>    <body>        <canvas id="myCanvas" width="400" height="400"></canvas>    </body>    <script>        window.onload = function(){            var oC = document.getElementById("myCanvas");            var OGC = oC.getContext("2d");            var num = 0;            var num2 = 0;            var value = 1;            setInterval(function(){                num++;                OGC.save();                OGC.clearRect(0,0,oC.width,oC.height);                OGC.translate(100,100);                //通过value改变num2值，控制是放大还是缩小                if (num2 == 100) {                    value = -1;                } else if(num2 == 0){                    value = 1;                }                num2+=value;                OGC.rotate(num*Math.PI/180);                //将旋转中心移到图片中心                OGC.translate(-50,-50);                OGC.fillRect(0,0,100,100);                OGC.restore();            },30);        }    </script></html>

效果图如下，gif看起来有些卡顿，实际运行很流畅，可以直接复制代码运行查看效果：
这里写图片描述

阅读全文

0 0