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 ...
随机推荐
- 东北林业大学第12届ACM（打表）
东北林业大学第12届ACMhttps://www.nowcoder.com/acm/contest/45#question F题和K题对大数运算的转化 首先F题,由于测试数据为接近10的100次方的大 ...
- 《DSP using MATLAB》 Problem 3.22
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- hdu1355
题意:有一片矩形花生田在路的一侧,田上的整数坐标位置有0个或多个花生,现规定从路上走到田地最边上的某个格点位置.从田边上走回路上.从一个格点移动到另一个格点.采摘格点上的花生,这四种动作都要花费一单位 ...
- mac 终端显示彩色
修改~/.bash_profile文件,在文件中加入下面两行配置. export CLICOLOR=1 export LSCOLORS=gxfxaxdxcxegedabagacad 保存文件, ...
- hasura graphql-engine v1.0.0-alpha26 版本新功能
hasura 发布了graphql-engine v1.0.0-alpha26 版本,有一些破坏的变动,以及方便的新特性 破坏性变动 order_by 从 order_by: id_asc 为 ord ...
- VPC/VM/VBOX安装GHOST版的无法启动系统
本人最近在安装一些公司的虚拟机,方便开发使用,不用每次都安装几个小时的装机和安装软件,但是本次却遇到了一点问题,虚拟机安装完成后一直无法进入系统,只有一个光标在黑色的屏幕上一闪一闪的,也没有任何错误提 ...
- JVM（上）
堆.栈 JVM内存≍Heap(堆内存)+PermGen(方法区)+Thrend(栈)Heap(堆内存)=Young(年轻代)+Old(老年代),官方文档建议整个年轻代占整个堆内存的3/8,老年代占整个 ...
- MongoDB初试备份及恢复
MongoDB作为文档数据库,有 1.登录MongoDB官网,地址:https://www.mongodb.com/download-center#community , 根据自己操作系统下载相应版 ...
- zstack快速安装文档
1.环境准备 1.1 准备软件工具 系统镜像 ZStack-x86_64-DVD-2.1.1.514.iso Zstack安装包 ZStack-installer-2.1.1.514.bin http ...
- junit 知识点
JUnit 测试框架具有以下重要特性: 测试工具 测试套件 测试运行器 测试分类 测试工具 测试工具是一整套固定的工具用于基线测试.测试工具的目的是为了确保测试能够在共享且固定的环境中运行,因此保证测 ...