han's bolg - 年糕記

canvas图片如何旋转90度

发表于 | 分类于 | 热度 ℃
字数统计 589 | 阅读时长 2

canvas如何实现将一张图片旋转90度的效果呢？

方法1：修改canvas的css，将canvas旋转90度

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid red;
        margin-bottom: 150px;
        display: block;
      }
      #myCanvas2 {
        transform: rotate(90deg);
      }
    </style>
  </head>

  <body>
    <canvas id="myCanvas"></canvas> <canvas id="myCanvas2"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas')
      var context = canvas.getContext('2d')
      var canvas2 = document.getElementById('myCanvas2')
      var context2 = canvas2.getContext('2d')
      var imageObj = new Image()
      imageObj.width = 440
      imageObj.height = 302
      var width = imageObj.width
      var height = imageObj.height

      imageObj.onload = function() {
        canvas.width = width
        canvas.height = height
        canvas2.width = width
        canvas2.height = height
        context.drawImage(imageObj, 0, 0)
        context2.drawImage(imageObj, 0, 0)
      }
      imageObj.src =
        'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'
    </script>
  </body>
</html>

缺点：

仅仅是从视觉上将图片旋转了，但如果将图片导出，获取到canvas2.toDataURL(‘image/png’)，图片仍然是正常的，而不是旋转之后的。

方法2：canvas不变，将图片旋转90度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid red;
        margin-bottom: 50px;
        display: block;
      }
    </style>
  </head>

  <body>
    <canvas id="myCanvas"></canvas> <canvas id="myCanvas2"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas')
      var context = canvas.getContext('2d')
      var canvas2 = document.getElementById('myCanvas2')
      var context2 = canvas2.getContext('2d')
      var imageObj = new Image()
      imageObj.src =
        'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'
      imageObj.width = 440
      imageObj.height = 300
      var width = imageObj.width
      var height = imageObj.height

      imageObj.onload = function() {
        canvas.width = width
        canvas.height = height
        canvas2.width = height
        canvas2.height = width
        context.drawImage(imageObj, 0, 0)
        context2.translate(canvas2.width / 2, canvas2.height / 2)
        context2.rotate(Math.PI * 90 / 180)
        context2.drawImage(imageObj, -canvas2.height / 2, -canvas2.width / 2)
        context2.rotate(-Math.PI / 2)
        context2.translate(-canvas2.width / 2, -canvas2.height / 2)
      }
    </script>
  </body>
</html>

canvas api

  • translate(): 重新映射画布上的 (0,0) 位置
  • rotate(): 方法旋转当前的绘图

要想理解这两个用法，就需要清楚转换之后的坐标位置，参考这篇文章

原理

  1. 先将ctx坐标移至canvas中心
  2. 旋转ctx90度，改变坐标系位置
  3. 将图片在坐标系的负1/2处渲染出来
  4. 将ctx坐标恢复默认

示意图

注意:

图片在canvas中的渲染，一定要放到imageObj.onload中，否则可能会出现渲染出来的图片为空，因为imageObj尚未加载完成。

掌握了这个旋转方法，在literallycanvas中的图片旋转就变得很简单了