【180day网站】36-42

1、String.fromCharCode(code1)函数： 将unicode字符值（序列）转化为字符（串）, 返回string类型。

2、

$(document)on("keypress", function(key) {
		
			var c = String.fromCharCode(key.charCode);
		
	}); 

捕捉键码。

3、37的绘制弹力球与38的文字动画均是通过递归调用或者setInterval不断改变对象的x, y坐标，然后清空画布重新绘制实现的。

4、jquery on的时候，绑定函数声明或函数表达式；off的时候好像要绑定函数调用啊啊啊啊好坑。

5、canvas绘制气泡如下。

效果：

代码：

var grd = ctx.createRadialGradient(b.size + b.x, b.size + b.y, b.size * 3, 
			b.size + b.x, b.size + b.y, b.size);
grd.addColorStop(0, "rgba(91, 174, 252, 0.7)");
grd.addColorStop(.7, "rgba(207, 231, 254, 0.5)");
ctx.fillStyle = grd;
ctx.shadowBlur = 20;
ctx.shadowColor = "rgb(255, 255, 255)";
ctx.beginPath();
ctx.arc(b.x, b.y, b.size, 0, Math.PI * 2);
ctx.fill();

6、箭头绘制。如下图。

#arrow {
	position: relative;
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-right: 9px solid #87fff1;
	-webkit-transform: rotate(180deg);
}
#arrow:after {
	content: "";
	position: absolute;
	border-top: 3px solid #87fff1;
	border-radius: 20px 0 0 0;
	top: -12px;
	left: -9px;
	width: 12px;
	height:12px;
	-webkit-transform: rotate(45deg);
}

7、

让文字在div的正中央：将line-height设置为跟div同高即可。

8、canvas的width, height属性不同于css中设置width与height。需单独设置。

9、事件绑定.on()只能绑定页面上已有的元素。如果想要对新添的元素生效，需要事件委托，如$(document).on("click", selector, function() {});

      也不要在函数中反复绑定。