<!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. test20180830

    所有试题限制均为128MB,1Sec 总分100(•́へ•́╬). 试题一 A题 问题描述: Bob 有 n 个士兵,他们排成一列按照从左到右编号为 1 到 n,每个士兵都有自己的 IQ 值,Bob ...

  2. 将string str中的str转换成字符数组

    #include <iostream> #include <map> #include <string.h> using namespace std; int ma ...

  3. dockercompose up build fail (node no such file or directory packages.json )

    docker构建项目遇到如下问题: npm ERR! Darwin 15.0.0 npm ERR! argv "/usr/local/lib/node_modules/iojs-bin/no ...

  4. Bloom Filter(布隆过滤器)的概念和原理

    Bloom filter 适用范围:可以用来实现数据字典,进行数据的判重,或者集合求交集 基本原理及要点: 对于原理来说很简单,位数组+k个独立hash函数.将hash函数对应的值的位数组置1,查找时 ...

  5. import()、import语句、require() 区别

    import命令能够接受什么参数,import()函数就能接受什么参数,两者区别主要是后者为动态加载. import() 与 import语句 区别 区别项 import() import语句 参数都 ...

  6. svn 报错及解决

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

  7. Linux 下V4l2摄像头采集图片，实现yuyv转RGB,RGB转BMP，RGB伸缩，jpeglib 库实现压缩RGB到内存中，JPEG经UDP发送功(转)

    ./configure CC=arm-linux-gnueabihf-gcc LD=arm-linux-gnueabihf-ld --host=arm-linux --prefix=/usr/loca ...

  8. Open Flash Chart 之线图(二)

    上一节在研究Open Flash Chart时,漏掉不少东西,只是简单的熟悉了一下后端的属性设置.今天再来补充一下. 一.显示Open Flash Chart图表 Open Flash Chart 前 ...

  9. vmware 安装 ios 苹果系统

    我用的系统是win10... 一.所需软件: 1.下载并安装VMware Workstation Pro 12 密码:7ybc和序列号 密码是:bwm0 2.下载unlocker 203(for OS ...

  10. Python mysql backup

    http://www.linuxidc.com/Linux/2015-02/113057.htm ------------- #!/usr/bin/python#################### ...