HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform
<!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 ( 图形变换矩阵 ) transform, setTransform的更多相关文章
- HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- Html5 Canvas transform setTransform
Html5 Canvas transform就是矩阵变换,一种坐标的变形. 坐标变形的三种方式,平移translate, 缩放scale以及旋转rotate都可以通过transform做到. tran ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- html5 canvas画图之图形随拖动而复制（有操作指示）
学习html5 canvas,写了一个小练习来加深理解,可以实现图形随拖动而复制. <!DOCTYPE html> <html> <head> <meta c ...
随机推荐
- listening for variable changes in javascript
https://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript
- mysql常用的聚合函数
GROUP BY(聚合)函数本章论述了用于一组数值操作的 group (集合)函数.除非另作说明, group 函数会忽略 NULL 值. 假如你在一个不包含 ROUP BY子句的语句中使用一个 gr ...
- 使用gitblit搭建一个简单的局域网服务器
使用gitblit搭建一个简单的局域网服务器 1.使用背景 现在很多使用github管理代码,但是github需要互联网的支持,而且私有的git库需要收费.有一些项目的代码不能外泄,所以,搭建一个局域 ...
- 【转】每天一个linux命令（39）：grep 命令
原文网址:http://www.cnblogs.com/peida/archive/2012/12/17/2821195.html Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表 ...
- RAC 修改 spfile 参数
我们知道数据库的参数文件有spfile 和pfile. RAC 的参数文件比较特殊. 因为默认情况下,RAC的spfile 是放在共享设备上(RAW设备或者ASM磁盘组).而在各节点的pfile文件里 ...
- Linq to sql 增删改查（转帖）
http://blog.csdn.net/pan_junbiao/article/details/7015633 (LINQ To SQL 语法及实例大全) 代码 Code highlightin ...
- C#重新启动时，关闭较早的进程
WPF程序重新启动,如果有客户端进程存在,则关闭较早的进程 private static System.Threading.Mutex mutex; public App() { this.Start ...
- signal简述
一个几乎是最简单的应用如下: #include <unistd.h> // for alarm() #include <signal.h> // for signal() #i ...
- monkey亲测
打开终端: adb devices 查看链接的设备 adb shell 进入手机系统 ls data/data 进入手机目录查看要执行目标app的包名 adb -s emulator-(机器名) s ...
- [转]ASP.net Application 生命周期事件
生命周期事件和 Global.asax 文件 在应用程序的生命周期期间,应用程序会引发可处理的事件并调用可重写的特定方法.若要处理应用程序事件或方法,可以在应用程序根目录中创建一个名为 Global. ...