1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>20-Canvas形变</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 canvas{
12 display: block;
13 margin: 0 auto;
14 background: red;
15 }
16 </style>
17 </head>
18 <body>
19 <canvas width="500" height="400"></canvas>
20 <script>
21 // 1.拿到canvas
22 let oCanvas = document.querySelector("canvas");
23 // 2.从canvas中拿到绘图工具
24 let oCtx = oCanvas.getContext("2d");
25 // 注意点: 在canvas中所有的形变属性操作的都是坐标系, 而不是图形
26
27 // 所以，要先改变坐标系的位置，才能绘制图形，不然，就会失效
28 // oCtx.translate(100, 0);
29 // oCtx.translate(0, 100);
30 // oCtx.translate(100, 100);
31 // oCtx.rotate(Math.PI/6);
32
33 oCtx.scale(0.5, 1);
34 // 3.绘制一个矩形
35 oCtx.strokeRect(100, 100, 200, 100);
36
37 </script>
38 </body>
39 </html>
