CG3

照片

Wed, 16 May 2012 07:30:05 GMT

附上二师兄靓照~一列，

感谢Htear的投稿 :)

照片

Mon, 07 May 2012 04:07:15 GMT

canvas cheat sheet

原创作品：朋友网游戏《群英斗》UI设计

Wed, 02 May 2012 02:07:48 GMT

首款全权负责整个UI设计和部分flash特效的游戏，有很多不足之处，需要继续学习和努力！

欢迎大家一起共同学习！

此上只是部分PS导出的平面图，更多的需要直接进入游戏看了，http://apps.pengyou.com/100626138

联系方式：1520424676@qq.com

多多指教了！！

感谢Htear的投稿 :)

前端开发工程师基本技能自测

Thu, 08 Mar 2012 03:25:42 GMT

DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。

XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。

严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。

盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。

块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。

浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。

JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

本段摘抄自《Nicholas C. Zakas如何面试前端工程师》

原文地址:http://www.cn-cuckoo.com/2010/01/08/how-nicholas-c-zakas-interviewing-the-front-end-engineer-1332.html

‘小物件，大快乐’

Thu, 15 Dec 2011 02:56:56 GMT

某一天逛市场，看见这般可爱精美的手工小饰品，有青蛙，鸭子，小金鱼，

瞬间抢购入手...............分享喜悦

感谢Htear的投稿 :)

“善念”主题海报设计

Thu, 15 Dec 2011 02:56:54 GMT

当初做的时候想的挺周全的，但是具体表现手法还不够到位，，

所以要继续努力。加油...........

感谢Htear的投稿 :)

照片

Tue, 13 Dec 2011 06:57:39 GMT

占位图片

感谢alex的投稿 :)

照片

Fri, 09 Dec 2011 08:56:58 GMT

css name

感谢alex的投稿 :)

icon设计

Thu, 08 Dec 2011 09:17:31 GMT

均属个人原创，

喜欢的可以Mail我，

转载请附带连接地址和说明，

欢迎共同学习，共同进步，

天天向上...........

感谢Htear的投稿 :)

canvas图形绘制——斗志的html5学习笔记(4)

Thu, 08 Dec 2011 08:04:19 GMT

首先再次和大家分享一下基础的canvas模板，下面的例子我们将只会为大家展示draw函数内“var cxt=myCanvas.getContext("2d");”以下的代码：

<!DOCTYPE html>
<html>
<head>
<title>myCanvas</title>
<script type="text/javascript">
   function draw()
   {
   var myCanvas=document.getElementById("myCanvas");
   var cxt=myCanvas.getContext("2d");

   }
    </script>
<style type="text/css">
* { margin:0; padding:0;}
</style>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" width="200" height="200"> Your browser does not support the canvas element. </canvas>
</body>
</html>

首先复习一下如何绘制矩形：

cxt.fillStyle="#000";
cxt.fillRect(50, 50, 100, 100);

接下来是关于canvas里面唯一的固定形状矩形的一些方法：

fillRect(x, y, width, height); //矩形填充 x：矩形左上角原点x轴坐标 y：矩形左上角原点y轴坐标 width：矩形宽 height：矩形高
strokeRect(x, y, width, height); //矩形描边
clearRect(x, y, width, height); //矩形清除使用矩形清除后所在区域将去除一起图形呈现出透明状态

在此需要提及一个小技巧，绘制一个矩形描边：

cxt.strokeRect(50, 50, 100, 100);

你会发现这个矩形描边有些模糊那是因为canvas坐标为整数时线的状态是在两个像素之间：

而坐标为0.5时才是正好位于一个像素上：

所以只要这样，就可以得到锐利的矩形了：

cxt.strokeRect(50.5, 50.5, 100, 100);

接下来是路径绘制的一些方法，这和一些矢量图形处理软件中对路径的理解基本一致例如Adobe Illustrator：

beginPath(); //绘制新路径，重置所有子路径
closePath(); //尝试用直线连接当前点与起始点
stroke(); //描边路径
fill();   //填充路径
moveTo(x, y);   //移动路径当前点
lineTo(x, y);   //用直线绘制路径

例：

cxt.beginPath();
   cxt.moveTo(10.5, 10.5);
   cxt.lineTo(100.5, 100.5);
   cxt.lineTo(100.5, 10.5);
   cxt.closePath();
   cxt.stroke();

arc(x, y, radius,
beginAngle, endAngle, anticlockwise); x，y：圆心坐标； radius：半径； beginAngle,
endAngle：开始的弧度和结束的弧度； anticlockwise：参数为true时为逆时针，参数为false时为顺时针；

这里beginAngle和endAngle都是使用的弧度制，角度和弧度的转换公式为var radians = (Math.PI/180)*degrees;
例：

cxt.beginPath();
cxt.arc(100, 100, 50, 0, Math.PI*2, true);
cxt.stroke();

当然还有需要复杂计算的二次方曲线和贝塞尔曲线，在此就不做过多介绍：

quadraticCurveTo(cp1x, cp1y, x, y); //二次方曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); //贝塞尔曲线

CG3

照片

照片

原创作品：朋友网游戏《群英斗》UI设计

前端开发工程师基本技能自测

‘小物件，大快乐’

“善念”主题 海报 设计

照片

照片

icon设计

canvas图形绘制——斗志的html5学习笔记(4)

“善念”主题海报设计