<!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. hdu2085-2086

    hdu2085 模拟 #include<stdio.h> ][]; void fun(){ a[][]=; a[][]=; ;i<=;i++){ a[i][]=*a[i-][]+*a ...

  2. Java8 （Function,Consumer,Predicate,Supplier）详解

    1. https://blog.csdn.net/lzm18064126848/article/details/70199769 1.1 https://blog.csdn.net/turbo_zon ...

  3. python之concurrent.futures模块

    一.concurrent.futures模块简介 concurrent.futures 模块提供了并发执行调用的高级接口 并发可以使用threads执行,使用ThreadPoolExecutor 或 ...

  4. codeforces 724c Ray Tracing

    好题 原题: There are k sensors located in the rectangular room of size n × m meters. The i-th sensor is ...

  5. 12 Factor CLI Apps

    CLIs are a fantastic way to build products. Unlike web applications, they take a small fraction of t ...

  6. 投行的码工 Dead-end job

    发信人: icestonesy (无忧), 信区: Quant 标  题: 投行的码工怎么样? 发信站: BBS 未名空间站 (Sat May 16 23:25:00 2015, 美东) 最近看到不少 ...

  7. 【转】每天一个linux命令（13）：less 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/05/2754477.html less 工具也是对文件或其它输出进行分页显示的工具,应该说是lin ...

  8. Centos7安装killall,fuser, killall,pstree和pstree.x11

    centos7精简安装后,使用中发现没有killall命令. 经查找,可以通过以下命令解决: yum -y install psmisc 简单介绍一下 psmisc : Psmisc软件包包含三个帮助 ...

  9. EF Code First Migrations数据库迁移 (转帖)

    1.EF Code First创建数据库 新建控制台应用程序Portal,通过程序包管理器控制台添加EntityFramework. 在程序包管理器控制台中执行以下语句,安装EntityFramewo ...

  10. [C++ Primer] : 第13章: 拷贝控制

    拷贝, 赋值与销毁 当定义一个类时, 我们显示地或隐式地指定在此类型的对象拷贝, 移动, 赋值和销毁时做什么. 一个类通过定义5种特殊的成员函数来控制这些操作, 包括: 拷贝构造函数, 拷贝赋值运算符 ...