css 实现小图片在大容器中垂直水平居中

19号阿里巴巴的笔试题中有一题是这样的：当图片小于容器时用css实现水平垂直居中，当时特没水准得写了:

img {
    margin: auto auto;
}

单纯的想到使div水平居中可以用

div {
    margin: 0 auto;
}

img是行内元素，设置margin: auto也不起作用。

解决方法(网上查的)：

原理：
在非IE的主流浏览器中，设置属性display为table-cell，即可支持垂直居中vertical-align属性。
而针对IE6/7浏览器，设置font-size。因为img和文本可以通过设置img的vertical-align:middle，居中对齐。（原理请参考《HTML权威指南》讲img的章节）因此，设置font-size为容器高度，再通过img的vertical-align属性，即可完成在容器内的垂直居中对齐。
*遇到的问题：
字号大小与文本实际高度不同。如例子中设置容器为350×350。font-size:350px的时候，字体实际占用的高度要大于350px。此外同样size的不同的字体占的高度也不同。如果只为了简体中文系统用户，可以选择宋体，因为宋体的文字占用高度与字号完全一致。这里用的是淘宝怿飞的方法，他选用的是Arial字体，这种字体为系统自带字体，可以避免因编码不同带来的问题。根据Arial字体大小大约是其高度的0.873，所以此时容器若为350，则字体设为350*0.873=305px.
适用情况：
图片尺寸小于容器尺寸，需要做水平和垂直居中。事实上当图片大于容器时，容器被撑大到和图片一样大。

以下为效果图：

live demo：http://jsfiddle.net/BJRz7/2/

使用Canvas 需要注意的几点

Leave a reply

clearRect(x1,x2,width,height)

原本认为canvas一个令人不愉快的地方是，它不能部分擦除，把不变的东西保留下来，把变化了的擦除进行修改。clearRect()带来了福音。它可以清除指定矩形内的像素,不管是stroke出来的线条还是填充的形状。

这是没有经过clearRect之前的效果，它由一个矩形、两个半圆和一些锯齿形线条组成。在形状的组合上还有一些情况，就是它们的边界很明显，所以拼接时在拼接处加了一个像素的重叠。

这是使用了clearRect之后的效果。整个图经过了45度的旋转，所以画起来比较方便，半圆的角度也都是π/2的整数倍。还有比较多的是给canvas重设宽高值，这样它就会自动除去整个canvas上的像素，整体擦除。

closePath()

closePath()的作用在于它可以把形状的起点和末点仪直线的形式连起来。如果之前没有定义beginPath()，则以最开始画的点为起点。否则就以最近的beginPath()为起点。beginPath()会是下个形状和上一个形状脱离，重新选择绘图起点。最好是成对出现，这样就可以避免形状之间的牵连(上个形状的末点会合下个形状的起点连在一起)。

下半部分的图没有使用任何beginPath()和closePath()，所以首末点和中间形状间的首末点都连在了一起。

save()和restore()

save()restore()是比较使用的工具,它们分别用于保存当前绘图状态，获取上一次存储的绘图状态。绘图状态是指当前绘图说用的样式(style)和变形(transform),包括strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation等属性以及一些transform和clipping path。绘图状态被存在一个栈(stack)内,每一次调用save()都会把当前的绘图状态压到栈内。每一次调用restore()都会把靠近的存储状态调出来，回到那个绘图状态。这样就可以很方便的在不同的状态之间转换，而不用重新设置。

下面是一个例子：

(function(){
	var canv = document.getElementById('canvas')
	,	contxt = canv.getContext('2d');
	contxt.fillStyle = '#379aff';
	contxt.arc(200,200,100, 0, 2*Math.PI);
	contxt.fill();
	contxt.save();
	contxt.fillStyle = 'white';
	contxt.beginPath();
	contxt.arc(200,200,80, 0, 2*Math.PI);
	contxt.closePath();
	contxt.fill();
	contxt.save();
	contxt.beginPath();
	contxt.fillStyle = 'black';
	contxt.arc(200,200,60, 0, 2*Math.PI);
	contxt.fill();
	contxt.restore();//白色
	contxt.beginPath();
	contxt.arc(200,200,40, 0, 2*Math.PI);
	contxt.fill();
	contxt.restore();//蓝色
	contxt.beginPath();
	contxt.arc(200,200,20, 0, 2*Math.PI);
	contxt.fill();
})();

canvas 做的猜字游戏

Leave a reply

用HTML5 canvas 做的小游戏，猜字母。字母为电脑随机产生的a到z之间的一个字母，一共有3次机会(可以修改)，并且每次猜测之后都会有提示，正确的字母会在游戏结束后显示。下面为主界面，它是由canvas的toDataURL()方法导出的图片。

程序主要分三块：initGame(),keyPressed(),drawScreen(),最后还有导出图像的函数createImageDataPressed()。

整个图形是由HTML5 canvas画的，每一次按键都会触发一次keyPressed()事件，事件触发后设置一些变量，如按下的键，剩余的猜测次数，然后对canvas重新绘制，不重新绘制它会和之前画的重叠在一起。对canvas的height或width设置一次值它就会重新绘制，这是它的巧妙之处。但是不能做到保留不变的，绘制变化的部分，所以有好有坏。这一特性经常被用来清除画布内容。

第一步：设置一些全局变量，以便各个函数能够随时读取。

以下是要设置的值：
index为待猜测字母在letters数组中的索引值，它由初始化函数initGame()产生，index = Math.floor(Math.random()*letters.length); js的Math.random()产生的是一个大于0小于1的双精度浮点数。

第二步：主要函数

初始化函数主要对前面的变量进行初始化，并且对按键事件建立监听。

事件触发之后就能绘制图像了。这里的关键就是对按键事件的监听。其中函数fromCharCode(e.keyCode)为判断按下的是什么键的提供了很大的便利。它返回按下的键的值，然后就可以在letters数组中遍历，如果没找到，即返回-1，则用户没有按要求按下字母，返回的是>=0的数字，就可以与index相比较判断用户输得字母是低了还是高了，a方为低，z方为高。如果与index相等，那用户就赢了。但是不知道是不是编码的问题，按下其他键比如空格键、分号、逗号等它显示的是希腊字母。letterToGArray[]数组初始化为空数组，只有游戏结束是才会给它push进去一个值，即letterToGuess。

drawScreen()就没有什么悬念了，都是一些基本的操作，不做展示。还需值得一提的是canvas的toDataURL()，它能将canvas以图像的形式导出。但是从它的名字可以看出，它将返回的是图像的数据，以便存储或导出。

function createImageDataPressed (e) {
  	window.open(canv.toDataURL(),"cavasImage","left=0,top=0,width="+canv.width+",height="+canv.height+",toolbar=0,resizable=0");
	}

live demo

HTML 标签的alt和title属性

Leave a reply

上图是一个可折叠的list@dribbble，它由四个带链接的图片组成。注意到上面的类似于tooltip的文字，它是<img>的title属性起得作用，当然IE下情况有所不同。

alt

定义：alt属性是<img>标签必要的属性。当图片无法正常显示时，它被用作图片的替换文字。使用：当图片无法找到或网络较差而无法正常显示，抑或者读者使用的是屏幕阅读器时，alt属性被用作文字替换，这也遵守了W3C的accesibility(易用性)标准。语法：<img alt=”text“>

当图片没有什么意义只用作装饰时， alt=”" ；
如果图片包含了信息，text需要对信息进行说明；
当图片包含在链接，即<a>标签内，text需要说明链接要跳转到哪里去；

支持：所有现代览器

title

定义和使用：title属性不是<img>标签所必需的属性，当用户hover在图片上时，title的值将以tooltip的形式出现，对用户起一定的提示作用。title属性不是必须的，它更倾向于对用户体验的考虑。

支持：所有现代览器

注意：IE9之前的IE浏览器会将alt的值作为提示来显示，前提是title不存在，title存在是它还是会优先显示title的值。

上图是IE8（IE7也一样）下显示的内容

当title不存在时，则显示alt的值。在firefox和chrome下都不显示任何文字。实际上这是IE的一种错误行为，它并不符合HTML规范。

Visuals VS Text

Leave a reply

每次在食堂吃完饭，就要端着盘子去一条长长的滚动条那儿放盘子以及将筷子和勺子分别放到相应的铁盒里回收，铁盒不大，分别有“筷子”、”勺子“的字样。每次分类前总是要犹豫一下，遇到人多的时候，一不小心就会放错；但是，在食堂的另一边，有两个大大的塑料盒子分别用来放筷子和勺子，没有贴分类标签，放之前能很清楚的看到里面放了什么。这时候我好像几乎没有犹豫过，哪个归哪个。

今天在slideshare上看到一个ppt讲到怎样把ppt讲得引人入胜.其中有一条是这么说的：不要光说，要向我们展示。要知道人类处理图像的速度比处理文字的速度快60,000倍(美国3M公司，明尼苏达矿业与制造公司的研究结果)。就好像说，看到一个圆和跟你描述到定点距离相同的点的集合哪一个更快呢？相信谁都会是看到图像想到的更快。只有当我们的思想，我们所说的话与具体的场景联系在一起，我们的大脑才真正会处理这些文字。文字是在短期存储内处理的，而短期存储内我们只能记忆7+/- 2位信息，所以美国的电话号码都是7位(这是有研究根据的，而不是任意定的位数)

中国有句古话：耳听为虚，眼见为实。人们认为，起码我也是这样，眼睛看到的最有说服力。所以对于网站来说，设计很重要。好的网页设计让人觉得这个网站更可信。还有对于现在那么多电子商务的网站没有什么比放上实实在在的照片更有说服力了。

—–部分引用自The Power of Visual Communication

收获1：最近有ppt要讲，要多注意使用图像，或是流程图，而不是单纯的文字。
收获2: 网站设计很重要，好的设计会让用户更加信赖这个网站。
注意：讲了图像的好，当然也不能极端，图像和文字的完美结合才是最完美的。

BigBang S06E19

Leave a reply

This week’s BigBang is so sweet and offers a good idea for telling someone something when he is curious about the truth but can’t face himself if he knows the truth. The “someone” is Howard. His father left him and his mother when he was young. So he hates him but on the other hand, he is curious about the reason why his father abandoned them. There came the letter. In fact, it was a letter years before when Howard was 18, that is to say in the year when Howard became an adult and deserved the truth. It had been hidden by Howard in the closet and was found by Sheldon when he helped arrange their closet and our responsible Sheldon read the letter. After Howard made his mind and set the letter on fire, the only one who knows the content of the letter was Sheldon and those guys made their own way to make Sheldon reveal the information about the letter and they succeseed. Howard freaked out and ran off when he knew that all of his friends knew the information. Finally, his friends came up with kind of a cool solution. That is everyone made his own copy of the information and told Howard. What Howard needed to do was to guess which one is real.

Raj: It was a card for your 18th birthday. Inside it said,”Happy birthday,Howard. I love you. Dad” oh, and it was a Far side card(搞笑贺卡). The one where the frog has its tongue stuck to the underside of an airplay. Thinks it’s a fly.
Sheldon: It was a map leading to the lost treasure of famous pirate One-Eyed Willy.(the plot for Goonies)
Amy: Your father was in the auditorium at your high shcool graduation. And he cried because he was so proud of you.(Sheldon immediately pointed out it was made up by Amy)
Penny: It was a letter explaining that your dad wasn’t who he said he was. Eventually his other life caught up to him. The only way to keep you and your mom safe was to leave.
Leonard: Your dad wrote about how family is the most important thing and that you should never throw it away like he did.
Bernadette: (she paused and said)Inside the envelope was a picture of your dad holding you the day you were born. On the back he wrote,”Howard, my son, my greatest gift.”

Here is my guess.

What Raj said is obviously made up. It perfectly matches his simple mind and cold humor. Sheldon’s is the plot of Goonies and Amy’s is the most sweet one. We can see that inside Amy, there is a heart eager for romance. Unfortunately, Sheldon leaked the truth immediately. Penny is different from these scientists. She is a social woman with a lot of experience and sees the same kind of plot of Howard’s life often. So she gave the realistic one. It can also be fake. What Leonard said sounds like some suggestion to Howard as a friend that he should value the family and should not abandon it in a stride. Finally, Bernadette,a picture. I can’t tell which is the real one between Leonard’s and Bernadette’s. But Bernadette is Howard’s wife. She is the very one who should tell the truth.That’s my guess.

what I want to say is no matter who really expressed what Howard’s father wanted to say, all of this is the wish and blessing to Howard. I envy him for having so many good friends.

HTML5 canvas 实例

Leave a reply

用THML5 canvas 画了一个表示幻灯片的icon(100px * 78px)@speakerdeck.com

这个icon的绘制首先要选中canvas元素，然后设定它的绘制环境，此时是在向量图环境下 //cont=canv.getContext (’2d’)，接下来就要绘制路径，用到的方法可以参考vectors vs bitmaps 。对于arc()需要再仔细看一下。

语法：arc(圆心横坐标,圆心纵坐标,半径,圆弧起始弧度,圆弧终止弧度,是否逆时针方向) 代码：cont.arc(x,y,radius,startAngle,stopAngle,counterclockwise) 不知道别人是不是也一样，反正我一开始对于这个起始弧度和终止弧度很不明白，每次都要根据画出来的图看看弧度是不是写对了。后来在网上看到了这个图。

canvas以其元素的左上角顶点为原点，向右为横坐标正方向，向下为纵坐标正方向(viewport 和 document也一样)。上图的PI值就是在这样一个坐标下确定的，和我们学过的坐标是一样的。有了四个方向上的PI值就可以按照顺时针或是逆时针方向很容易的选择角度了。

具体实现的程序如下：

心得：

用canvas画图深切让我重温了大学里用autoCAD画图的经历，最麻烦的事就是确定学要的点的坐标，遇到sin cos时很麻烦。
还有一点要注意！canvas的默认大小是300px * 150px，有时候我们不需要那么大，或是需要更大。这时候可以设置canvas的width值和height值，这里设置的方法并不是像第一块代码的注释那样对css样式进行修改，而是： canv.setAttribute(“width”,”300″); canv.setAttribute(“height”,”300″); 或是
canv.width = “300″;
canv.height = “300″;这修改的只是canvas能够渲染的面积，并不会对绘制的图进行缩放，而上面代码中的注释： canv.style.width=“300px”;
canv.style.height=”300px“；（或者直接在css中改）则会对图进行缩放，它会根据canvas的默认值300px * 150px按比例进行缩放，现在x轴方向没变，y轴方向加倍了。如下图：

House of Card

Leave a reply

House of Card
- There are two kinds of pain.

痛苦分两种。
- The sort of pain that makes you strong

一种让你变得跟强
- or useless pain

另一种毫无价值
- The sort of pain that’s only suffering.

只是徒添折磨

- It was a hit and run.

肇事逃逸
- I love that woman.I love her more than sharks love blood.

我爱那个女人，甚于鲨鱼爱鲜血。
- However we do this, we’ll also need a buffer.

不管我们打算怎么做，得找个中间人。
- You mean an errand boy?

找个傀儡吗？
- Okay, i’ll keep my ear to the ground.

好，我会留意的。
- A person’s character isn’t determined by how he or she enjoys victory， but rather how he or she endures defeat. Nothing can help us endure dark times better than our faith.

一个人的品行不取决于这人如何享受胜利，而在于这人如何忍受失败。没什么比信仰更能支撑我们度过艰难时光了。
- We’re going to let some people go.

我们要裁员。
- That would be half of our staff?

裁掉一半么？
- We have to carve out some room. We are a charity, but not for our employee.

我们必须腾出些位置。我们是慈善机构，但不服务于职员。
- We’ve plateaued.

发展遇到了瓶颈。

- Driving under influence.

酒后驾车。
- cover to cover.

从头到尾。

- In a town where everyone’s so carefully reinventing themselves, what I like about Freddy is that he doesn’t even pretend to change.

这个城市的每个人都在精心地改头换面，弗莱迪的可贵之处在于他甚至不装作要改变。
- They talk while I sit quitely and imagine their lightly salted faces frying in a skillet.

他们谈话而我安静地坐着，想象他们淡腌过的脸在煎锅中炸。
- You are well aware that I do not drop the ball on things like this.

你知道我不会在这种事上犯错。
- He chose money over power. In this town, a mistake nearly everyone makes. Money is the McMansion in Sarasota that starts falling apart after ten years. Power is the old stone building that stands for centuries.

为了钱而放弃了权利。这个城市里，几乎人人都犯了这个错。金钱是萨拉索塔的巨无霸豪宅，保质期就只有十年。权力是古老的石砌建筑，能屹立数百年。
- What a martyr craves more than anything is a sword to fall on, so you sharpen the blade, hold it at the right angle and then 3, 2, 1…

烈士最渴求的就是壮烈牺牲，所以你磨好兵刃，调整好角度默数三二一。
- Tomo and Jude was appetizers, Ray is the meal.

Tomo和Jude不过是开胃菜，Ray才是主菜。

I dreamed a dream

Leave a reply

《I dreamed a dream》第一次听到是在英国的达人秀里，它让susan大婶一举成名。随着《悲惨世界》的到来才知道它的出处，芳汀（Fantine）原本有一份工作，但是工头看上了她,让她在女工里面到处到排挤以致最后丢了工作。为了女儿她把能卖的都卖了，卖了长发，卖了两颗牙，最后只能卖身。这是她第一次卖身时唱的，她曾经也有梦，向往着那个抛弃了她的人有一天能回来与她厮守终身。可是…那个秋天之后，他就在也没有出现,他就是男主，冉阿让(Valjean)。《悲惨世界》虽然是歌剧，还是很值得一看的，台词写得很赞。

I dreamed a dream
* There was a time when man were kind

曾经男人是和气的
* When their voices were soft

他们语气温柔
* And their words inviting

言语讨人喜欢
* There was a time when love was blind

曾经爱情是盲目的
* And the world was a song

世界像一首歌
* And the song was exciting

旋律激动人心
* There was a time

曾经有个时候
* Then it all went wrong

然后一切落入歧途
* I dreamed a dream in time gone by

我梦到了已经远逝的时光
* When hope was high and life worth living

那是梦想如帆岁月如金
* I dreamed that love would never die

我梦到爱永不凋零
* I dreamed that God would be forgiving

我梦到上帝仁慈宽厚
* Then I was young and unafraid

那时我年轻无惧
* And dreams were made and used and wasted

梦想诞生被利用了被浪费了
* There was no ransom to be paid

那时不曾担心后果
* No song unsung, no wine untasted

无歌不唱无酒不尝
* But the tigers come at night

然而猛虎趁夜前来
* With their voices soft as thunder

吼声低沉如雷
* As they tear your hope apart

撕碎你的希望
* As they turn your dream to shame

把你的梦变成耻辱
* He slept a summer by my side

整个夏天他睡在我身旁
* He filled my days with endless wonder

他让我每天充满惊喜
* He took my childhood in his stride

他轻易拿走了我的童贞
* But he was gone when autumn came

可秋天来时他已经离开
* And still I dream he’ll come to me

我仍梦想他会来找我
* That we will live the years together

跟我共度余生
* But there are dreams that cannot be

但有些梦永不会成真
* And there are storms we cannot weather

有些难关我们没法度过
* I dreamed my life would be

我曾经梦想我的人生
* So different from this hell I’m living

跟这地狱是多么不同
* So different now from what it seemed

跟它曾经的景象是多么不同
* Now life has killed the dream i dreamed

现在生活扼杀了我做过的梦

vectors vs bitmaps

1 Reply

vectors

矢量图，由一系列形状(shapes)组成，而这些形状是用一系列方程来描述的。因此，可以进行形变(位移，旋转，缩放等)而不有损画质。

bitmaps

位图，局限于将相应的颜色填充在相应的像素点，形变后可能会产生锯齿或颜色混杂等情况。

canvas很好的解决了这一问题。

canvas API提供了许多绘图命令：

beginPath()用于定义一个新的路径。
closePath()用于闭合路径。
moveTo()移动到某一点为相关路径的绘制作准备。
lineTo(x, y)绘制直线,(x, y)为终点坐标。
rect(x, y, width, height)绘制矩形，(x, y)为左上角坐标，width 和 height 分别为宽高。
arc(x, y, radius,startAngleRadians, endAngleRadians, antiClockwiseDirection)绘制圆弧，(x, y)为圆心坐标，起始点的角度以弧度表示。
fill(), stroke()分别填充和描边路径。fill(), stroke()的样式分别由fillStyle=[string | object], strokeStyle=[string | object]定义。
drawImage(image, …)在canvas区域内画图。
clearRect(x, y, width, height)类似于rect(),只不过这一次在现有canvas上抠去这个矩形。

canvas的绘图机制：

using drawing commands to create shapes
modify shapes
render path in bitmap

clearRect(x1,x2,width,height)

closePath()

save()和restore()

第一步：设置一些全局变量，以便各个函数能够随时读取。

第二步：主要函数

alt

title

注意：IE9之前的IE浏览器会将alt的值作为提示来显示，前提是title不存在，title存在是它还是会优先显示title的值。

心得：

vectors

bitmaps

canvas很好的解决了这一问题。