Seajs中的传入参数require为什么不能改名 Seajs的require本质

作为函数的传入参数,名字当然是可以修改的,比如Seajs中的function(require, exports, module),require理应可以改名成r/req等等,但改名之后你会发现函数体中所require的模块没有被加载,为什么?
阅读全文 “Seajs中的传入参数require为什么不能改名 Seajs的require本质”

平移变形,HTML5 Canvas绘图教程 指南 手册

平移(translate),将绘图区相对于当前画布的左上角进行平移,如果你不进行变形,绘图区原点和画布原点是重叠的,绘图区相当于画图软件里的热区或当前层的,把这一点理解了,你就理解了Canvas的变形含义了。找了好几个例子,都没有办法清楚的说明这个功能,最后自己动作改了一个,下面的例子会在画布中画9个方块,你会注意画方块的函数竟然是在固定的x & y上画,而实际却没有重叠,这就是平移的效果,如果注掉translate函数,就是你预期的效果了。 阅读全文 “平移变形,HTML5 Canvas绘图教程 指南 手册”

变形前的准备,HTML5 Canvas绘图教程 指南 手册

在介绍各种变形特效之前,先说一下两个配对使用的函数save() & restore(),这两个函数所保存和恢复的是context的状态,什么是状态?状态包括当前已经被应用的变形;所有样式的设定;裁剪路径。注意,Path路径以及位图不包括在内,因为Path是连续操作的对象,只能用beginPath()操作,而位图是画布的属性,不属于context范畴。save和restore操作是按堆栈方式进行的,类似于Undo操作,你可以无限的使用他们。
下面的例子演示了save和restore的功用,在画前5个矩形时,每次都会设置新的颜色,并调用save()保存状态,从第6个矩形开始不再设置线条颜色,而是恢复之前状态,最后的效果是颜色被顺序使用,然后又被反序使用。

代码:

<canvas id="id_canvas_transform" width="200" height="200"> 
抱歉,当前浏览器不支持Canvas标签。
</canvas> 
<script type="text/javascript">
<!--
(function drawRect()
{ 
	var canvasObj = document.getElementById('id_canvas_transform'); 
	if (canvasObj.getContext)
	{ 
		var context = canvasObj.getContext('2d');
		var colors = ['#FF6600', '#FF00CC', '#66CC00', '#3333CC', '#CC0000'];
		for (var i = 0; i < colors.length * 2; i++) 
		{
			if (i < colors.length)
			{
				context.strokeStyle = colors[i];
				context.save();
			}
			else 
			{
				context.restore();
			}
			context.strokeRect(i*10,i*10,200-i*10*2,200-i*10*2);
		}
	} 
})(); 
//-->
</script>

用尺子画图,HTML5 Canvas绘图教程 指南 手册

上一讲介绍了如何绘制矩形,绘图函数执行后就会显现在画布上,我们这一讲是介绍另外一种非同步显示的函数,类似于画图时我们使用了自由画笔,只要不确定绘制完成,线条就处于高亮状态,在Canvas里,称之为Path。
利用beginPath,我们将状态设置为绘图状态,然后由moveTo(x, y)确定画笔先落在哪里,接下来利用不同的尺子就可以画不同的形状了,比如直线lineTo,圆形arc等。利用closePath()来决定是否闭合曲线,利用fill()或stroke()确定是否要填充或画线,调用fill时会自动closePath(),注意如果不调用这两个函数,图形是不会被显示的。

相关的API:
beginPath()
closePath()
stroke()
fill()
moveTo(x, y)
lineTo(x, y)
arc(x, y, radius, startAngle, endAngle, anticlockwise)
rect(x, y, width, height)
quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

代码:

<canvas id="id_canvas_path" width="200" height="200" style="border:green 2px solid;"> 
抱歉,当前浏览器不支持Canvas标签。
</canvas> 
<script type="text/javascript">
<!--
(function drawRect()
{ 
	var canvasObj = document.getElementById('id_canvas_path'); 
	if (canvasObj.getContext)
	{ 
		var context = canvasObj.getContext('2d');
		
		context.clearRect(0,0,200,200);
		context.fillStyle = '#0000FF';
		context.strokeStyle = '#FF0000';

		//准备画线
		context.beginPath();
		context.moveTo(10, 10);
		context.lineTo(10, 100);
		context.stroke();

		context.beginPath();
		context.arc(60,60,50,0,Math.PI*2, false);	//这里是弧度,而不是度,记得Math.PI代表180度
		context.closePath();
		context.stroke();

		context.beginPath();
		context.rect(100,100,50,50);
		context.stroke();

	} 
})(); 
//-->
</script>

从方块开始,HTML5 Canvas绘图教程 指南 手册

本来对HTML5不感兴趣,因为大部分人还都是在用IE浏览器,而目前的IE8还不支持,但今天从IBM开发网站上看到了一篇文章,觉得还不错,就干脆花点时间充充电。本系列文章秉承Hi Magic!的一贯风格,均是原创,并结合常用的绘图软件使用经验进行对比介绍,保证你阅读后会”印象很深刻”,实乃编程开发之必备,hiahiahia… 阅读全文 “从方块开始,HTML5 Canvas绘图教程 指南 手册”

jQuery min包的制作方法,压缩javascript的方法比对和方案

这两天想用pack后的javascript为朋友们整理出用于抢购的程序,于是想弄一个跟jQuery min包一样的pack方法,加快加载时间,当然主要是好奇。在上网转了一圈,全都是一模一样的抄袭文章,也分不出来哪个是原创,以后搜索引擎得有搜原创的能力,不然原作者太受打击了。
对于该问题还真没有合适的答案,给的链接是死链,国外的网站也都是无关痛痒的描述。从CSDN上下了一堆工具,没一个好使的。当然,最终我还是弄明白了,具体如下。 阅读全文 “jQuery min包的制作方法,压缩javascript的方法比对和方案”

用javascript无法修改html对象样式的问题和原因 !important这个捣蛋鬼

相信各位高手肯定知道怎么用javascript/vbscript修改html对象的样式,比如修改字体颜色、变更字号等,这太简单了。但,如果有一天你发现你的代码不起作用时,千万别觉得奇怪,因为存在这样的可能性。且听我详细分析。 阅读全文 “用javascript无法修改html对象样式的问题和原因 !important这个捣蛋鬼”

jQuery开发插件指南,详解复杂插件的实现步骤

在网上找了半天的插件开发心得,没有一篇合适的,又是一堆重复的文章,实在是可恶,以后Google应该增加一个只显示原创的功能,太耽误时间了,自己写一些吧,保证你不白给我送IP。 阅读全文 “jQuery开发插件指南,详解复杂插件的实现步骤”