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');
  37.     /**
  38.      * 图形变换矩阵( 默认情况下是一个单位举证 )
  39.      * 一个三维正矩阵  transform 的效果会累计, 直到遇到 setTransform
  40.      *  a, c, e  |  1, 0, 0
  41.      *  b, d, f  |  0, 1, 0
  42.      *  0, 0, 1  |  0, 0, 1
  43.      * transform(水平缩放a, 水平倾斜b, 垂直倾斜c, 垂直缩放d, 水平位移e, 垂直位移f)
  44.      */
  45.     cxt.fillStyle = 'red';
  46.     cxt.strokeStyle = '#058';
  47.     cxt.lineWidth = 5;
  49.     cxt.save();
  50.     cxt.transform(1, 0, 0, 1, 100, 100);
  51.     cxt.transform(1.5, 0, 0, 1.5, 0, 0);
  52.     cxt.transform(1, 0.2, 0.2, 1, 0, 0);
  53.     //cxt.setTransform(1, 0, 0, 1, 0, 0);
  54.     cxt.fillRect(50, 50, 100, 100);
  55.     cxt.strokeRect(50, 50, 100, 100);
  56.     cxt.restore();
  57. </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 ...