innerHTML与innerText的用法与区别
用法：
<div id="test">
<span >test1 test2
</div>
在JS中可以使用：
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span >test1 test2 ”。
test.innerText:
从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
test.outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是<div id="test"><span >test1 test2</div>
完整示例：
<div id="test">
<span >test1 test2
</div>
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>
特别说明：
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除
本文链接
居然有好几个月没有更新博客了。。。我堕落了。。。
大家好，通过上一次的学习我们简单了解了非常重要的几个特性：坐标原点位移与状态保存。这两个特性对于canvas的使用有着非常多的帮助，在以后的学习中我们要渐渐接触更多与之有关的使用。同样的，在以后的使用中大家也会反复的使用这两个功能。所以希望大家可以多多练习，以熟练掌握它们。
今天我们来学习新的方法，首先是rotate方法，这个方法的作用是以中心为原点旋转canvas。在上次的学习中我们曾经对translate的使用进行了分析，曾经提起过以中心为原点的旋转问题，下面我们就准备来学习这个方法了。
rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
旋转的中心点始终是canvas的原点，如果要改变它，我们需要用到translate方法。
似乎很简单对吧，其实就是很简单，不用想的太过于复杂了。我们来看一个例子吧：
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(75,75);
for (var i=1;i<6;i++){ // Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
for (var j=0;j<i*6;j++){ // draw individual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
}
ctx.restore();
}
}
简单的说，内层循环中使用了rotate方法，以坐标中心为原点进行小圆点的绘制，外层循环中规定了离原点的绘制距离、每层的绘制个数以及颜色。也就是说，这里我们又用到了两层循环。第一层循环决定环的数量，第二层循环决定每环有多少个点。每环开始之前，都保存一下canvas的状态，这样恢复起来方便。每次画圆点，都以一定夹角来旋转canvas，而这个夹角则是由环上的圆点数目的决定的。最里层的环有6个圆点，这样，每次旋转的夹角就是360/6 = 60度。往外每一环的圆点数目是里面一环的2倍，那么每次旋转的夹角随之减半。相信这段简单的代码是难不倒大家的~
好了，我们继续下个知识点的学习，下一步我们将学习缩放。什么叫缩放不用我再讲一遍了吧，我们直接开始吧。
首先我还是来定义一下缩放的概念吧。所谓缩放。就是用来增减图形在canvas中的像素数目，对形状，位图进行缩小或者放大。
scale(x, y)
scale方法接受两个参数。x,y分别是横轴和纵轴的缩放因子，它们都必须是正值。值比1.0小表示缩小，比1.0大则表示放大，值为1.0时什么效果都没有。
默认情况下，canvas的1单位就是1个像素。举例说，如果我们设置缩放因子是0.5，1个单位就变成对应0.5个像素，这样绘制出来的形状就会是原先的一半。同理，设置为2.0时1个单位就对应变成了2像素，绘制的结果就是图形放大了2倍。
这个很简单吧，其实就是放大缩小嘛。我们借着一段代码来看一下吧：
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.strokeStyle = "#fc0";
ctx.lineWidth = 1.5;
ctx.fillRect(0,0,300,300);
// Uniform scaling
ctx.save()
ctx.translate(50,50);
drawSpirograph(ctx,22,6,5); // no scaling
ctx.translate(100,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
// Non-uniform scaling (y direction)
ctx.strokeStyle = "#0cf";
ctx.save()
ctx.translate(50,150);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
// Non-uniform scaling (x direction)
ctx.strokeStyle = "#cf0";
ctx.save()
ctx.translate(50,250);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(177.777,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.restore();
}
还记得以前画了好多螺旋曲线的那个方法吗？我们又要用它啦~
这最后的例子里，我再次启用前面曾经用过的spirograph方法，来画9个图形，分别赋予不同的缩放因子。左上角的图形是未经缩放的。黄色图案从左到右应用了统一的缩放因子（x和y参数值是一致的）。看下面的代码，你可以发现，我在画第二第三个图案时scale了两次，中间没有restore canvas的状态，因此第三个图案的缩放因子其实是0.75 × 0.75 = 0.5625。
第二行蓝色图案堆垂直方向应用了不统一的缩放因子，每个图形x方向上的缩放因子都是1.0，意味着不缩放，而y方向缩放因子是0.75，得出来的结果是，图案被依次压扁了。原来的圆形图案变成了椭圆，如果细心观察，还可以发现在垂直方向上的线宽也减少了。
第三行的绿色图案与第二行类似，只是缩放限定在横轴方向上了。
是不是很简单呢？只要抓住诀窍就能很容易拿下这个方法了。在这个问题上我们不做过多的讲解了，让我们来到今天的高潮—变形。。。
这是最恶心也是最难的一点了，因为，你需要会图形学的基础知识。。。
你不会啊，没事，我也不会，咱一起来学~
今天所学习的最后一个方法是允许直接对变形矩阵作修改：
transform(m11, m12, m21, m22, dx, dy)
这个方法必须将当前的变形矩阵乘上下面的矩阵：
m11 m21 dx
m12 m22 dy
0 0 1
如果任意一个参数是无限大，变形矩阵也必须被标记为无限大，否则会抛出异常。
这个方法必须重置当前的变形矩阵为单位矩阵，然后以相同的参数调用transform方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。
setTransform(m11, m12, m21, m22, dx, dy)
这个方法必须重置当前的变形矩阵为单位矩阵，然后以相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。
理解了么？不理解？好吧，让我们换个思路来看这个东西，我会尽量给大家解释清楚的。
首先是当前的变形矩阵，当前的变形矩阵是什么啊，其实很简单：
x
y
1
这个就是当前的变形矩阵了。。。是不是后悔没有好好学习线代呢？
变形矩阵也就是横纵左边以及缩放倍数组成的一个矩阵，横纵坐标就是x与y，缩放倍数就是那个1。
首先让我们看一下平移：
当有：
x’=x+dx
y’=y+dy时：
x’ 1 0 dx x
y’= 0 1 dy X y
1 0 0 1 1
也就是说，可以使用context.transform (1,0,0,1,dx,dy)代替context.translate(dx,dy)。
也可以使用context.transform(0,1,1,0.dx,dy)代替。
然后是缩放：
当有：
x’=sx*x
y’=sy*y时：
x’ sx 0 dx x
y’= 0 sy dy X y
1 0 0 1 1
也就是说可以使用context.transform(sx,0,0,sy,0,0)代替context.scale(sx, sy)，也可以使用context.transfo
主要知识点
① transform属性：
ratate（旋转度数）
scale（等比例缩放）
skew(x , y);让元素倾斜显示,包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
②animate 适用于鼠标经过产生宽度，高度，left，top等等 示例 transition:1s ease all;所有事件产生动画！
div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}@-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}
style
*{ margin: 0; padding: 0;}
body {
overflow: hidden;
}
#clouds{
background:-webkit-linear-gradient(top,#c9dbe9 0%,#fff 100%);/*等价于background:-webkit-gradient(linear,left top,left bottom,from(c9dbe9),to(#fff))*/
background:-moz-linear-gradient(top,#c9dbe9 0%,#fff 100%);
background:-o-linear-gradient(top,#c9dbe9 0%,#fff 100%);
padding:100px 0px;
}
.cloud{
width:200px;
height:60px;
background:#FFF;
border-radius:200px;
-webkit-border-radius:200px;
-moz-border-radius:200px;
-o-border-radius:200px;
position:relative;}
.cloud:after,.cloud:before{
content:'';
position:absolute;
background:#FFF;
width:100px;
height:80px;
top:-15px;
left:10px;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
-o-border-radius:100px;}
.cloud:after{
width:120px;
height:120px;
top:-55px;
left:auto;
right:15px;}
.x1{
-webkit-animation:moveclouds 25s linear infinite;
-moz-animation:moveclouds 25s linear infinite;
-o-animation:moveclouds 25s linear infinite;}
.x2{
left:200px;
transform:scale(0.6);
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
opacity:0.6;
animation:moveclouds 25s linear infinite;
-webkit-animation:moveclouds 25s linear infinite;
-moz-animation:moveclouds 25s linear infinite;
-o-animation:moveclouds 25s linear infinite;}
.x3{
top:-200px;
left:-250px;
transform:scale(0.6);
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
opacity:0.6;
animation:moveclouds 25s linear infinite;
-webkit-animation:moveclouds 25s linear infinite;
-moz-animation:moveclouds 25s linear infinite;
-o-animation:moveclouds 25s linear infinite;}
.x4{
top:200px;
left:470px;
transform:scale(0.6);
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
opacity:0.6;
animation:moveclouds 25s linear infinite;
-webkit-animation:moveclouds 25s linear infinite;
-moz-animation:moveclouds 25s linear infinite;
-o-animation:moveclouds 25s linear infinite;}
.x5{
left:470px;
top:-250px;
transform:scale(0.8);
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
opacity:0.8;
animation:moveclouds 25s linear infinite;
-webkit-animation:moveclouds 18s linear infinite;
-moz-animation:moveclouds 18s linear infinite;
-o-animation:moveclouds 18s linear infinite;}
@-webkit-keyframes moveclouds{
0%{margin-left:1000px;}
100%{margin-left:-1000px;}
}
@-moz-keyframes moveclouds{
0%{margin-left:1000px;}
100%{margin-left:-1000px;}
}
@-o-keyframes moveclouds{
0%{margin-left:1000px;}
100%{margin-left:-1000px;}
}
html
<div id="clouds">
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
本文链接