可以进行坐标缩放，设为负值可以翻转图片；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scale</title> </head> <body> <canvas id='myCanvas' width='800' height='600'> your browser does not support canvas </canvas> <script type="text/javascript"> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); ctx.beginPath(); ctx.strokeStyle = '#000000'; ctx.strokeRect(10, 10, 150, 100); ctx.scale(3, 3); ctx.beginPath(); ctx.strokeStyle = '#cccccc'; ctx.strokeRect(10, 10, 150, 100); ctx.scale(0.15,0.15); ctx.beginPath(); ctx.strokeStyle = '#ff0000'; ctx.strokeRect(10,10,150,100); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scale</title> </head> <body> <canvas id='myCanvas' width='800' height='600'> your browser does not support canvas </canvas> <script type="text/javascript"> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); var img = new Image(); img.src = 'face.jpg'; img.onload = function() { ctx.drawImage(img, 10, 10); ctx.scale(1, -1); ctx.drawImage(img, 250, -250); ctx.arc(250, -250, 20, 0, 2 * Math.PI, true); ctx.stroke(); }; </script> </body> </html>