<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; outline: none; border: none; } #canvas{ width: 7rem; margin: .25rem 0 0 1.5rem; border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="1000" height="600"></canvas> </body> </html> <script type="text/javascript"> /** * rem 布局初始化 */ $('html').css('font-size', $(window).width()/10); /** * 獲取 canvas 畫布 * 獲取 canvas 繪圖上下文環境 */ var canvas = $('#canvas')[0]; var cxt = canvas.getContext('2d'); /** * 圖形變換矩陣( 默認情況下是一個單位舉證 ) * 一個三維正矩陣 transform 的效果會累計, 直到遇到 setTransform * a, c, e | 1, 0, 0 * b, d, f | 0, 1, 0 * 0, 0, 1 | 0, 0, 1 * transform(水平縮放a, 水平傾斜b, 垂直傾斜c, 垂直縮放d, 水平位移e, 垂直位移f) */ cxt.fillStyle = 'red'; cxt.strokeStyle = '#058'; cxt.lineWidth = 5; cxt.save(); cxt.transform(1, 0, 0, 1, 100, 100); cxt.transform(1.5, 0, 0, 1.5, 0, 0); cxt.transform(1, 0.2, 0.2, 1, 0, 0); //cxt.setTransform(1, 0, 0, 1, 0, 0); cxt.fillRect(50, 50, 100, 100); cxt.strokeRect(50, 50, 100, 100); cxt.restore(); </script>
