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>