<!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的更多相关文章

  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. 【WebForm】知识笔记

    一.ashx介绍以及ashx文件与aspx文件之间的区别 ashx是什么文件? .ashx 文件用于写web handler的. .ashx文件与.aspx文件类似,可以通过它来调用HttpHandl ...

  2. [团队项目]SCRUM项目6.0 7.0

    6.0----------------------------------------------------- sprint演示 1.坚持所有的sprint都结束于演示. 团队的成果得到认可,会感觉 ...

  3. smarty学习——基本概念

    学习一种框架,我们最基本的就是掌握框架的思想,同时了解框架的基本语法. 1.对于定界符的了解 有的smarty模板标签都被加上了定界符. 默认情况下是 { 和},但它们是可被改变的.例如,我们假定你在 ...

  4. 如何安装Genymotion模拟器

    我们在进行App测试的时候,除了使用真机进行测试,有时候还需要借助模拟器来进行测试,那么Android SDK本身给我们提供了一个原生态的模拟器,但是由于启动太慢,性能太差,逐渐被大家放弃了,那么还有 ...

  5. 关于 Cookie-free Domains (为什么将静态图片，js，css存放到单独的域名？)

    这篇文章对高性能web开发具有参考性:http://developer.yahoo.com/performance/rules.html 本文主要描述使用裸域名做网站主域名时,如何用子域名做 cook ...

  6. webpack 的插件 DllPlugin 和 DllReferencePlugin

    在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间.所以,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库 ...

  7. Linq to sql 增删改查（转帖）

    http://blog.csdn.net/pan_junbiao/article/details/7015633   (LINQ To SQL 语法及实例大全) 代码 Code highlightin ...

  8. 后台取IE的相关信息

    HttpBrowserCapabilities b = Request.Browser; Response.Write("浏览器名称和版本号:" + b.Type + " ...

  9. POJ3013 Big Christmas Tree

    题目:http://poj.org/problem?id=3013 求每个点到1的最短路.不是最小生成树. 总是WA.看讨论里说INF至少2e10,于是真的A了! 算一下,dis最大可能3276800 ...

  10. Windows10安装.net3.5

    1.装载windows10映像 2.运行如下命令(注意修改盘符): Dism /online /enable-feature /featurename:NetFX3 /All /Source:F:\s ...