<!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. Tempter of the Bone dfs+剪枝

    The doggie found a bone in an ancient maze, which fascinated him a lot. However, when he picked it u ...

  2. 直接new一个对象出来

  3. Java JNDI 学习

    一.概念: 1.JNDI(JavaNaming and Directory Interface,Java命名和目录接口)是SUN公司提供的一种标准的Java命名系统接口,JNDI提供统一的客户端API ...

  4. slf4j-api、slf4j-log4j12、log4j 之间是什么关系？

    slf4j:Simple Logging Facade for Java,为java提供的简单日志Facade.Facade:门面,更底层一点说就是接口.他允许用户以自己的喜好,在工程中通过slf4j ...

  5. 获取 user-agents

    user-agent "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0. ...

  6. 学习笔记之C# / .NET Core 2.0

    C# 教程 | 菜鸟教程 http://www.runoob.com/csharp/csharp-tutorial.html .NET API Browser | Microsoft Docs htt ...

  7. jstack可以定位到线程堆栈

    java命令--jstack 工具 JVM调优之jstack找出最耗cpu的线程并定位代码 jstack可以定位到线程堆栈,根据堆栈信息我们

  8. 关于UC、火狐、谷歌浏览器屏蔽布局中广告的解决办法

     关于UC浏览器屏蔽了广西人才网的名企.品牌.热点的logo,是因为当成广告过滤掉了,以后div的class和id不能以“ad”开头.这可能只是其中一个规则,adxxxx是可以的,不能是adXxxx, ...

  9. [UE4]为什么会有类型检查

    类型检查 定义:对象的行为是否符合类型的行为 作用:帮助开发者找出潜在的错误. 类型转换 隐式类型转换:整数可以和浮点数运算 显式类型转换/强制类型转换

  10. [UE4]事件代理，无输出参数，蓝图中不需要绑定

    .h UFUNCTION(BlueprintImplementableEvent, meta=(DisplayName = "LoginSuccess")) void LoginS ...