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 ...
随机推荐
- 网络流--最大流dinic模板
标准的大白书式模板,除了变量名并不一样……在主函数中只需要用到 init 函数.add 函数以及 mf 函数 #include<stdio.h> //差不多要加这么些头文件 #includ ...
- vue组件独享守卫钩子函数参数详解(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
一样的和前面路由钩子类似的步骤 首先在demo下面的components下面新建一个test.vue组件 test组件代码 <template> <div class="t ...
- makefile,让编译更简单
陈皓 (CSDN) 概述—— 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的 ...
- MySQL--lsblk命令查看块设备
lsblk命令用于列出所有可用块设备的信息,而且还能显示他们之间的依赖关系,但是它不会列出RAM盘的信息.块设备有硬盘,闪存盘,cd-ROM等等. lsblk命令包含在util-linux-ng包中, ...
- 我的nginx iis 负载均衡学习(环境搭建)
1,下载并安装nginx 比较简单 2,进行网站的配置 我使用了我的IIS 站点中已经拥有的两个站点 3,进行nginx 的配置 配置如下: 在server 节点之前添加如下的配置: upstream ...
- 遍历json 对象的属性并且动态添加属性
昨天因为公司的一个需求,所以就研究了一下json对象的属性的遍历和动态修改: var person= { name: 'zhangsan', pass: '123' , 'sni.ni' : 'sss ...
- 多线程安全问题之Lock显示锁
package com.hls.juc; import java.util.concurrent.locks.Lock;import java.util.concurrent.locks.Reentr ...
- WAJUEJI which home strong!nyoj
WAJUEJI which home strong! 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 在一个山沟里,姐弟俩同时考上了大学.但由于家里拮据,所以这并不是 ...
- java 多线程之:join() 方法
join()介绍 join() 定义在java.lang.Thread中. join() 的作用:让"主线程"等待"子线程"结束之后才能继续运行.
- hadoop集群安装配置详细教程
在上一篇的分享文章中我是给大家分享了运行部署hadoop的一些安装准备工作,这篇接上一篇继续为大家分享一些个人的学习经验总结.我学习用的是大快发行版DKHadoop,所以所有的经验分享都是以DKHad ...