paint2d-transform-ref.html (447B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <canvas id ="output" width="200" height="200"></canvas> 5 <script> 6 var canvas = document.getElementById('output'); 7 var ctx = canvas.getContext('2d'); 8 9 ctx.fillStyle = 'green'; 10 ctx.transform(1, 0.5, 0, 1, 20, 20); 11 ctx.fillRect(0, 0, 50, 50); 12 13 ctx.resetTransform(); 14 15 ctx.fillStyle = 'blue'; 16 ctx.translate(150, 60); 17 ctx.rotate(60 * Math.PI / 180); 18 ctx.scale(1.5, 1); 19 ctx.fillRect(0, 0, 50, 50); 20 </script> 21 </body> 22 </html>