1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>canvas</title>
  6. <script type="text/javascript" src="../js/jQuery.js"></script>
  7. <style type="text/css">
  8. *{
  9. margin: 0;
  10. padding: 0;
  11. outline: none;
  12. border: none;
  13. }
  14. #canvas{
  15. width: 7rem;
  16. margin: .25rem 0 0 1.5rem;
  17. border: 1px solid black;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <canvas id="canvas" width="1000" height="600"></canvas>
  23. </body>
  24. </html>
  25. <script type="text/javascript">
  26. /**
  27. * rem 布局初始化
  28. */
  29. $('html').css('font-size', $(window).width()/10);
  30. /**
  31. * 获取 canvas 画布
  32. * 获取 canvas 绘图上下文环境
  33. */
  34. var canvas = $('#canvas')[0];
  35. var cxt = canvas.getContext('2d');
  36. /**
  37. * 图形变换矩阵( 默认情况下是一个单位举证 )
  38. * 一个三维正矩阵 transform 的效果会累计, 直到遇到 setTransform
  39. * a, c, e | 1, 0, 0
  40. * b, d, f | 0, 1, 0
  41. * 0, 0, 1 | 0, 0, 1
  42. * transform(水平缩放a, 水平倾斜b, 垂直倾斜c, 垂直缩放d, 水平位移e, 垂直位移f)
  43. */
  44. cxt.fillStyle = 'red';
  45. cxt.strokeStyle = '#058';
  46. cxt.lineWidth = 5;
  47. cxt.save();
  48. cxt.transform(1, 0, 0, 1, 100, 100);
  49. cxt.transform(1.5, 0, 0, 1.5, 0, 0);
  50. cxt.transform(1, 0.2, 0.2, 1, 0, 0);
  51. //cxt.setTransform(1, 0, 0, 1, 0, 0);
  52. cxt.fillRect(50, 50, 100, 100);
  53. cxt.strokeRect(50, 50, 100, 100);
  54. cxt.restore();
  55. </script>

HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform的更多相关文章

  1. HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  6. Html5 Canvas transform setTransform

    Html5 Canvas transform就是矩阵变换,一种坐标的变形. 坐标变形的三种方式,平移translate, 缩放scale以及旋转rotate都可以通过transform做到. tran ...

  7. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  8. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  9. html5 canvas画图之图形随拖动而复制(有操作指示)

    学习html5 canvas,写了一个小练习来加深理解,可以实现图形随拖动而复制. <!DOCTYPE html> <html> <head> <meta c ...

随机推荐

  1. 网络流--最大流dinic模板

    标准的大白书式模板,除了变量名并不一样……在主函数中只需要用到 init 函数.add 函数以及 mf 函数 #include<stdio.h> //差不多要加这么些头文件 #includ ...

  2. vue组件独享守卫钩子函数参数详解(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

    一样的和前面路由钩子类似的步骤 首先在demo下面的components下面新建一个test.vue组件 test组件代码 <template> <div class="t ...

  3. makefile,让编译更简单

    陈皓 (CSDN) 概述—— 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的 ...

  4. MySQL--lsblk命令查看块设备

    lsblk命令用于列出所有可用块设备的信息,而且还能显示他们之间的依赖关系,但是它不会列出RAM盘的信息.块设备有硬盘,闪存盘,cd-ROM等等. lsblk命令包含在util-linux-ng包中, ...

  5. 我的nginx iis 负载均衡学习(环境搭建)

    1,下载并安装nginx 比较简单 2,进行网站的配置 我使用了我的IIS 站点中已经拥有的两个站点 3,进行nginx 的配置 配置如下: 在server 节点之前添加如下的配置: upstream ...

  6. 遍历json 对象的属性并且动态添加属性

    昨天因为公司的一个需求,所以就研究了一下json对象的属性的遍历和动态修改: var person= { name: 'zhangsan', pass: '123' , 'sni.ni' : 'sss ...

  7. 多线程安全问题之Lock显示锁

    package com.hls.juc; import java.util.concurrent.locks.Lock;import java.util.concurrent.locks.Reentr ...

  8. WAJUEJI which home strong!nyoj

    WAJUEJI which home strong! 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 在一个山沟里,姐弟俩同时考上了大学.但由于家里拮据,所以这并不是 ...

  9. java 多线程之:join() 方法

    join()介绍 join() 定义在java.lang.Thread中. join() 的作用:让"主线程"等待"子线程"结束之后才能继续运行.

  10. hadoop集群安装配置详细教程

    在上一篇的分享文章中我是给大家分享了运行部署hadoop的一些安装准备工作,这篇接上一篇继续为大家分享一些个人的学习经验总结.我学习用的是大快发行版DKHadoop,所以所有的经验分享都是以DKHad ...