- Transformations

scale(0.5,0.5) 缩放
rotate(0.175) 旋转
translate(100,50) 位移

- 代码结构

  context.scale(x, y)

  context.rotate(angle )

  context.translate(x, y)

  context.rotate(0.175);

  context.scale(0.75,0.75 );

  context.fillRect(0,0,200,150);

  context.translate(100,50);

  context.rotate(0.175 );

  context.fillRect(0,0,200,150);

- 旋转图片

  image.onload =  function() {

    var rotate = 15;

    var scaleStart =  0.0;

    var scaleEnd =  4.0;

    var scaleInc =  (scaleEnd ‐scaleStart)/(360/rotate);

    var s  = scaleStart;

    for(var i=0; i<=360; i+=rotate) {

       s += scaleInc;

       context.translate(540,260);

       context.scale(s,s);

       context.rotate(i*‐1*Math.PI/180);

       context.drawImage( image,0,0,120,80);

       context.setTransform(1,0,0,1,0,0);

    }

   };

- context.setTransform(m11,m12,m21,m22,dx,dy)

m11,m12,m21,m22四个参数用来修改使用这个方法之后，绘制图形的计算方法，以达到变形目的
dx表示将坐标原点在x轴上向右移动x个单位
dy表示将坐标原点在y周上向下移动y个单位

- 实例

<body>

    <canvas width="1000" height="800" style="border: 1px dotted black;"/>

    <script type="text/javascript">

        var canvas = document.querySelector('canvas');

        var context = canvas.getContext('2d');

        var deg2rad = function (deg) {

            //alert(deg * (Math.PI / 180.0));

            return deg * (Math.PI / 180.0);

        };

        var rect = function (col) {

            context.save();

            context.fillStyle = col;

            context.strokeStyle = 'black';

            context.globalAlpha = 0.5;

            context.fillRect(0, 0, 160, 120);

            context.strokeRect(0, 0, 160, 120);

            context.restore();

        };

        // inital coordinate system 正常

        context.setTransform(1, 0, 0, 1, 160, 100);

        rect('silver');

        // scale    缩放

        context.setTransform(1, 0, 0, 1, 520, 100);

        context.scale(0.5, 0.5);

        rect('yellow');

        // rotate    旋转

        context.setTransform(1, 0, 0, 1, 160, 360);

        context.rotate(deg2rad(20));

        rect('red');

        // translate  位移

        context.setTransform(1, 0, 0, 1, 520, 360);

        context.translate(80, 40);

        rect('lime');

        // 输出文字

        context.font = '16px Arial';

        context.setTransform(1, 0, 0, 1, 230, 250);

        context.fillText('正常', 0, 0);

        context.setTransform(1, 0, 0, 1, 590, 250);

        context.fillText('缩放', 0, 0);

        context.setTransform(1, 0, 0, 1, 230, 550);

        context.fillText('旋转', 0, 0);

        context.setTransform(1, 0, 0, 1, 600, 550);

        context.fillText('位移', 0, 0);

    </script>

</body>

--------- 针对属性的操作

- document.getElementsByClassName()

  <li id=de class=q>Berlin</li>

  <li id=at class=q>Vienna</li>

  questions.item(1).innerHTML => Vienna

  questions.namedItem('de').innerHTML => Berlin

使用空格连接多个关键字

  var mmm = document.getElementsByClassName('red apple');

- Data-*  标记可以用来自定义数据

 <li id=at class=q

    data-pop=1705080

    data-geo-lat=48.20833

    data-geo-lng=16.373064

    data-country='Austria'>Vienna</li>
var el = q.namedItem('at');

var pop = el.dataset.pop;    //

var lat =  el.dataset.geoLat;   // 48.208

var lng =  el.dataset.geoLng;   // 16.373

var ctr =  el.dataset.country;  // Austria

el.dataset.pop =  1717034;    // 通过dataset取值

- Hidden 属性 将元素隐藏起来

 var showRandomNItems = function(q,n) {

    var show = [];

    for (var i=0;  i<q.length; i++) {

        q.item(i).hidden  = true;

        show.push(i);

    }

    show.sort(function()  {return  0.5  – Math.random()});

    for(var i=0; i<n; i++) {

        q.item(show[i]).hidden = false;   // 设置为false为显示,true为隐藏

    }

  };

- classList接口

DOMTokenList
item(),contains(),add(),remove(),toggle()

    <li class="red apple">
    li.classList.length     => 2

    li.classList.item(0)     => red        // 根据索引值取值

    li.classList.item(1)     => apple

    li.classList.contains('red')       => true    // 判断是否包含指定字符串

    li.classList.contains('apple')       => true

    li.classList.contains('organic')   => false

    li.classlist.add('organic')        // 添加元素

    li.classList.item(2)  => organic    

    banana.classList.remove('organic');        // 移除元素

--- 小实例  一个面包的一天

  // 早上的时候

  bread.classlist.add('fresh')

  // 中午的时候

  bread.classList.toggle('fresh')

  bread.classList.contains('fresh') => false

  //  第二天的早上

  bread.classList.toggle('fresh')

  bread.classList.contains('fresh') => true

HTML5之图形变换的更多相关文章

  1. HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. HTML5拓扑图形组件设计之道（一）

    HT for Web(http://www.hightopo.com/guide/readme.html)提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表 ...

  3. 计算机图形学 - 图形变换（opengl版）

    作业题目: 图形变换:实现一个图形绕任意直线旋转的程序. 要求:把一个三维图形绕任意一条直线旋转,需要有初始图形,和旋转后的图形,最好也可以实时控制旋转. 最少要做出绕z轴旋转. 原理:http:// ...

  4. SVG坐标系统及图形变换

    前面的话 前面介绍过SVG视野后,本文将开始介绍SVG坐标系统及图形变换 坐标定位 对于所有元素,SVG使用的坐标系统或者说网格系统,和Canvas用的差不多(所有计算机绘图都差不多).这种坐标系统是 ...

  5. canvas星空和图形变换

    图形变换. 一.画一片星空 先画一片canvas.width宽canvas.height高的黑色星空,再画200个随机位置,随机大小,随机旋转角度的星星. window.onload=function ...

  6. 《Real Time Rendering》第四章 图形变换

    图形变换是一个将例如点.向量或者颜色等实体进行某种转换的操作.对于计算机图形学的先驱者,掌握图形变换是极为重要的.有了他们,你就可以对象.光源以及摄像机进行定位,变形以及动画添加.你也可以确认所有的计 ...

  7. HTML5-Canvas 图形变换+状态保存

    1. 图形变换 canvas是基于状态绘制图形的.故此一般情况下,canvas的绘制的图形路径和状态时分离的. function drawShape(ctx){ // 绘制路径 shapePath(c ...

  8. 2D平面中关于矩阵（Matrix）跟图形变换的讲解

    在二维平面上,常用的有以下三种基本的图形变化: 1)Translation 2)Scale 3)Rotation 在canvas的开发中,我们也经常会用到这样的一些图形变换,尤其是我们在写自定义Vie ...

  9. WebGL简易教程(五)：图形变换(模型、视图、投影变换)

    [toc] 1. 概述 通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值 ...

随机推荐

  1. leetcode || 53、Maximum Subarray

    problem: Find the contiguous subarray within an array (containing at least one number) which has the ...

  2. C++函数的传入参数是指针的指针（**）的详解

    要修改变量的值,需要使用变量类型的指针作为参数或者变量的引用.如果变量是一般类型的变量,例如int,则需要使用int 类型的指针类型int *作为参数或者int的引用类型int&.但是如果变量 ...

  3. Ruby on Rails Tutorial 第五章 完善布局

    本章目标:局部视图.Rails路由.Asset Pipeline.Sass1.Bootstrap是Twitter开发的开源Web设计框架mockup是网页构思图,在web领域经常称之为“线框图”,用于 ...

  4. Qt 显示透明flash和编写QtWebkit插件

    Qt 有两种方法可以显示flash. 1. 通过QAxWidget 调用com形式显示flash, 需要本机安装IE flash插件 2. 直接通过qwebview显示flash, 需要下载webki ...

  5. Android 高级UI设计笔记06：仿微信图片选择器（转载）

    仿微信图片选择器: 一.项目整体分析: 1. Android加载图片的3个目标: (1)尽可能的去避免内存溢出. a. 根据图片的显示大小去压缩图片 b. 使用缓存对我们图片进行管理(LruCache ...

  6. Android（java）学习笔记100：android开发中修改字体

    首先如果android内部自带的字体不是我们需要的字体,那我们就需要字体文件导入到android开发工程中,下午我们详细讲述: 1.我们首先分析知道,我想要TextView控件中文字的字体是:华文楷体 ...

  7. envi中selected rgb bands contain different spatial sizes

    是选择了不同的影像文件envi中selected rgb bands contain different spatial sizes

  8. android开发之路11（用SharedPreferences存储数据）

    Android平台给我们提供了一个SharedPreferences类,实际上SharedPreferences处理的就是一个key-value(键值对),它是 一个轻量级的存储类,特别适合用于保存软 ...

  9. 小团队开发管理工具：gitlab+redmine+testlink+jenkins

    由于工作需要,需要为团队搭建一个高效可用的开发管理平台.现在可用的开发管理工具很多开源的.商业的,网上也有很多博客和文章.经过2周的学习比较,再结合自己的项目特点,最后选定工具集:gitlab+red ...

  10. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...