HTML5如何自动变图,HTML5之图形变换

- 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个单位

- 实例

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);

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

- document.getElementsByClassName()

BerlinVienna

questions.item(1).innerHTML => Vienna

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

使用空格连接多个关键字

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

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

data-pop=1705080

data-geo-lat=48.20833

data-geo-lng=16.373064

data-country='Austria'>Vienna

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.item(i).hidden = true;

show.push(i);

}

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

for(var i=0; i

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

}

};

- classList接口

DOMTokenList

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

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拓扑图形组件设计之道(一)

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

计算机图形学 - 图形变换(opengl版)

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

SVG坐标系统及图形变换

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

canvas星空和图形变换

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

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

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

HTML5-Canvas 图形变换&plus;状态保存

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

2D平面中关于矩阵(Matrix)跟图形变换的讲解

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

WebGL简易教程&lpar;五&rpar;：图形变换&lpar;模型、视图、投影变换&rpar;

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

随机推荐

css雪碧图生成工具4&period;3更新

v3.0更新介绍地址:http://www.cnblogs.com/wang4517/p/4476758.html v4.0更新介绍地址:http://www.cnblogs.com/wang4517 ...

【读书笔记《Bootstrap 实战》】4&period;企业网站

上一章有对个人作品站点进行一些优化.本章,轮到我们充实这个作品站点了,补充一些项目,从而展示我们的能力.换句话说,我们要构建一个相对复杂的企业网站主页. 下面有几个成功企业的网站: □ Zappos ...

socket&period;io 中文手册 中文文档

服务端 io.on('connection',function(socket));//监听客户端连接,回调函数会传递本次连接的socket io.sockets.emit('String',data) ...

MyEclipse 常用操作

1.使用JREBEL插件包实现myeclipse修改类文件后无须重启 在Myeclipse中的window-preferences(搜索tomcat)->然后到tomcatx.x下的-jdk中配 ...

javascript 常用实用函数。。。。。。

javascript 正则表达式 1.获取屏幕大小尺寸 /* 获取屏幕大小尺寸 */ var getScreen = function () { var screen = { width: 0, he ...

nyist 500 一字棋

题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=500 这太并不难,只要把情况分清楚就可以了,本人由于考虑不是很周全,WA了n次....悲 ...

MySQL索引与Index Condition Pushdown

实际上,这个页面所讲述的是在MariaDB 5.3.3(MySQL是在5.6)开始引入的一种叫做Index Condition Pushdown(以下简称ICP)的查询优化方式.由于本身不是一个层面的 ...

并发系列(5)之 Future 框架详解

本文将主要讲解 J.U.C 中的 Future 框架,并分析结合源码分析其内部结构逻辑: 一.Future 框架概述 JDK 中的 Future 框架实际就是 Future 模式的实现,通常情况下我们 ...

【OJ】抓牛问题

/* 农夫John的奶牛跑路了.将地图视作一条数轴,John的初始位置在s而奶牛的位置在t(0<=s,t<=100000).John可以花费一分钟的时间使自己作如下移动: 1 从点x移动到 ...

qml&colon; 以鼠标为中心进行放缩；

import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.2 Window { visible: true widt ...