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个单位
- 实例
<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之图形变换的更多相关文章
- HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 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.onload=function ...
- 《Real Time Rendering》第四章 图形变换
图形变换是一个将例如点.向量或者颜色等实体进行某种转换的操作.对于计算机图形学的先驱者,掌握图形变换是极为重要的.有了他们,你就可以对象.光源以及摄像机进行定位,变形以及动画添加.你也可以确认所有的计 ...
- HTML5-Canvas 图形变换+状态保存
1. 图形变换 canvas是基于状态绘制图形的.故此一般情况下,canvas的绘制的图形路径和状态时分离的. function drawShape(ctx){ // 绘制路径 shapePath(c ...
- 2D平面中关于矩阵（Matrix）跟图形变换的讲解
在二维平面上,常用的有以下三种基本的图形变化: 1)Translation 2)Scale 3)Rotation 在canvas的开发中,我们也经常会用到这样的一些图形变换,尤其是我们在写自定义Vie ...
- WebGL简易教程(五)：图形变换(模型、视图、投影变换)
[toc] 1. 概述 通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值 ...
随机推荐
- myeclipse-10.7-offline-installer-windows安装图解及注意事项
MyEclipse企业级工作平台(MyEclipseEnterprise Workbench ,简称MyEclipse)是对EclipseIDE的扩展,利用它我们能够在数据库和JavaEE的开发.公布 ...
- js判断图片是否显示
function getDefaultImg() { //添加判断图片是否存在操作 var $defaultImgPathObj = $('input[name=defaultImgPath]'); ...
- 解决用ASP.NET下载文件时,文件名为乱码的问题
关键就一句: string strTemp = System.Web.HttpUtility.UrlEncode(strName, System.Text.Enc ...
- c语言数组的初始化
#include "stdio.h" int main() { ][]; a[][]="1,2,3,4,5,6,7,8,9,10,11,12"; ]=a,*p= ...
- Asp.Net 之 使用Form认证实现用户登录 (LoginView的使用)
1. 创建一个WebSite,新建一个页面命名为SignIn.aspx,然后在页面中添加如下的代码 <div class="div_logView"> <asp: ...
- Android 高级UI设计笔记06：仿微信图片选择器（转载）
仿微信图片选择器: 一.项目整体分析: 1. Android加载图片的3个目标: (1)尽可能的去避免内存溢出. a. 根据图片的显示大小去压缩图片 b. 使用缓存对我们图片进行管理(LruCache ...
- iPhone screen size
iPhone 4 iPhone 5 iPhone 6 iPhone 6 Plus Display Size 3.5 in 4 in 4.7 in 5.5 in Screen Size 320 x ...
- 配置hibernate例子
一.hiberbate.cfg.xml <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE hib ...
- HDU 1058 Humble Numbers (DP)
Humble Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- LeetCode 344
Reverse String Write a function that takes a string as input and returns the string reversed. Exampl ...