- 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; // 1705080 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