【HTML5】Canvas中的tranform变换矩阵

来源:互联网 发布:康佳电视直播的软件 编辑:程序博客网 时间:2024/05/19 01:07

在Canvas中有个方法比较特殊,不同于画笔中其他各种旋转,而是一种矩阵变换,方法名为tranform。

调用示例:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){var canvas=document.getElementById("myCanvas");var context=canvas.getContext("2d");context.transform(2,0,0,2,150,150);context.fillRect(0,0,100,100);});</script></head><body><canvas id="myCanvas" width="1000px" height="1000px"></canvas></body></html>

其中transform方法中的参数假设一次为a、b、c、d、e、f。

如下具体每个参数的作用。大家可以试试代码中加tranform和没加tranform方法的效果就可以更加明了trnaform的作用。


1 0
原创粉丝点击