<!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>
