<!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. 《DSP using MATLAB》Problem 4.17

  2. 玩转ptrace (一)

    转自http://www.cnblogs.com/catch/p/3476280.html [本文翻译自这里: http://www.linuxjournal.com/article/6100?pag ...

  3. leetcode:Minimum Depth of Binary Tree【Python版】

    1.类中递归调用添加self: 2.root为None,返回0 3.root不为None,root左右孩子为None,返回1 4.返回l和r最小深度,l和r初始为极大值: # Definition f ...

  4. svn 报错及解决

    报错: svn: E155015: One or more conflicts were produced while merging r68508:73308 into '[分支]' -- reso ...

  5. O(n)线性空间的迷宫生成算法

    之前所有的迷宫生成算法,空间都是O(mn),时间同样是O(mn),时间上已经不可能更优化, 于是,我就从空间优化上着手,研究一个仅用O(n)空间的生成算法. 我初步的想法是,每次生成一行,生成后立即输 ...

  6. linux I2C_client产生方法一

    \arch\arm\mach-omap2/board-am335xevm.c static struct i2c_board_info am335x_i2c2_boardinfo[] = { {  I ...

  7. docker 里面的supervisord不断killed

    这个原因就一般是百度上大家说的,内存不足啦 但是死也得死个明白 用这个命令 dmesg | egrep -i -B100 'killed process' 看一下就知道了 我的是docker限制了内存 ...

  8. mysql视图 新手的问答

    ☺ζั͡ޓއއއ๓º♥双٩(•(365335093) 16:03:02 创建的视图能保存多长时间,保存在哪啊 上天&宠儿(961431958) 16:08:59 数据库 上天&宠儿(9 ...

  9. 关于Hibernate Could not obtain transaction-synchronized Session for current thread

    转载自 http://blog.csdn.net/flyjiangs/article/details/51537381 最近几年一直再搞android,最近闲下来了,顺便玩一下web. 整了个最新版本 ...

  10. springMVC学习(8)-数据回显

    什么是数据回显: 提交后,如果出现错误(或者别的情况),将刚才提交的数据回显到刚才的提交页面. pojo数据回显方法: 一.springmvc默认对pojo数据进行回显. 比如现在的jsp页面提示出现 ...