HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform
2017-03-27 13:55
423 查看
<!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>
相关文章推荐
- 深入解析HTML5 Canvas控制图形矩阵变换的方法
- 【Html5每日练习】canvas绘制坐标变换图形
- Android与IOS的Transform图形变换矩阵之间快速转换方法
- HTml5 Canvas 整理笔记之图形变换
- HTML5教程-用Canvas标签绘制坐标变换图形
- HTML5利用Canvas绘制图形(绘制渐变、模式、变换)
- CANVAS 变换,transform,rotate,scale,矩阵,css3矩阵,svg矩阵
- HTML5-Canvas 图形变换+状态保存
- HTML5 canvas基本绘图之图形变换
- html5绘制变形图形-变换坐标原点
- svg中transform的矩阵变换原理
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
- Html5 Canvas transform setTransform
- Canvas的图形变换
- HTML5 绘制图形canvas 使用路径(一)
- 图形变换的矩阵方法
- 3D图形变换中为什么使用四维矩阵,而不是三维矩阵?
- 【Html5每日练习】canvas绘制线性渐变图形
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- 3D 图形编程的数学基础(3) 矩阵基本变换