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 ...
随机推荐
- L5负载均衡
L5负载均衡组件的功能职责 L5的功能特征如下: 名字服务:以SID(由模块ID和命令字ID组成)为关键字,通过SID取得真正的IP和端口地址,使得IP和端口配置对调用者透明,运维变更配置更方便: 负 ...
- Android中logcat和日志打印
一.logcat对日志过滤 1.# logcat --help # logcat --help Usage: logcat [options] [filterspecs] options inclu ...
- day41 mysql 学习 练习题 重要*****
MySQL 练习题[二1.表如下: 收获和注意点:***** #1 GROUP by 可以放到where s_id in ()条件局后边 GROUP BY s_id having 详见题12 #2 做 ...
- /etc/grub.conf
http://leejia.blog.51cto.com/4356849/788902 grub.conf是grub的主配置文件,通过这个配置文件,grub才能找到kernel,系统才能正常启动. # ...
- 【转】每天一个linux命令（33）：df 命令
原文网址:http://www.cnblogs.com/peida/archive/2012/12/07/2806483.html linux中df命令的功能是用来检查linux服务器的文件系统的磁盘 ...
- 【RAC】使用一条“ps”命令获取Linux环境下全部RAC集群进程信息
如何仅使用一条ps命令便能获取到所有与RAC集群进程相关的信息. 从所使用的命令角度上看很简单,仅需使用ps命令结合grep命令便能实现.问题关键是需要确定检索哪些关键字. 1.与RAC集群有关的进 ...
- Nginx隐藏主机信息，proxy_hide_header 与fastcgi_hide_header
Nginx中proxy_hide_header 与fastcgi_hide_header都可以隐藏主机头信息,两者在具体使用时还是有着一定的区别的.刚好业务使用的nginx反向代理在显示响应头时将后端 ...
- C# 中取绝对值的函数
System.Math.Abs(float value); System.Math.Abs(decimal value); System.Math.Abs(int value); System.Mat ...
- 计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll解决办法
今天开始Python学习之旅,安装配置好Python环境之后,在命令行中输入Python命令,提示“计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll...” 解决办法: ...
- DataTable 分批处理，每批处理4行
ZZ -- /// <summary> /// 分批处理. /// </summary> public void PartialProc() { ;//每个datatable行 ...