canvas实现图片旋转缩放

时间 2020-08-18 标签 canvas 实现图片旋转缩放

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

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

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

<!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度；
java

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

<!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看起来有些卡顿，实际运行很流畅，能够直接复制代码运行查看效果：
canvas