CG3

‘小物件，大快乐’

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); //贝塞尔曲线

照片

Tue, 06 Dec 2011 10:09:13 GMT

基于Jquery的文本框默认值插件。实现文本框内添加默认提示信息，鼠标选择文本框后提示自动消失的效果。会持续优化支持请到该项目地址下载最新版本http://www.teamhost.org/projects/inputval

canvas基础——斗志的html5学习笔记(3)

Tue, 06 Dec 2011 07:24:45 GMT

<canvas id="myCanvas" width="150" height="150"></canvas>

好吧这就是传说中的<canvas>元素，它可以帮助你实现在网页上玩儿涂鸦或者制作游戏的梦想。它只有两个属性， width 和 height ，不填的话默认 width="300"，height="150"。canvas的宽和高也可以通过css来进行设置，不过使用css改变canvas的高度有可能会造成渲染结果变形，所以不建议使用。
因为canvas元素比较新所以在使用的时候需要加入替换内容，具体方法很简单:

<canvas>这里加入替换元素</canvas>

canvas初始化是空白的，要在上面用脚本画图首先需要渲染上下文 (rendering context) ，它可以通过canvas元素对象的getContext方法来获取，同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');//现在只有2d渲染模式

上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其 getContext 方法取得其画图操作上下文。
除了使用替换内容还可以用 js 检查浏览器是否支持 canvas 。即判断 getContext 是否存在：

var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// 绘图代码
} else {
// 不支持 canvas 提示内容
}

在canvas里面的坐标是左上角原点为（0，0），x轴最大坐标为（width，0），y轴最大坐标为（0,height），如图所示：

接下来上代码演示如何在 canvas 上绘制两个矩形：

<html>
<head>
<script type="text/javascript">
    function draw() {
      var canvas = document.getElementById("myCanvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
</script>
</head>
<body onload="draw();">
   <canvas id="myCanvas" width="150" height="150"></canvas>
</body>
</html>

其中fillStyle设置填充颜色，fillRect (x, y, width,height) 使用分别使用矩形左上角坐标及矩形的宽和高进行绘制。

canvas 图形绘制简易模板：

<html>
<head>
    <title>myCanvas</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('myCanvas');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
</head>
<body onload="draw();">
    <canvas id="myCanvas" width="150" height="150"></canvas>
</body>
</html>

直接保存下来备用吧!

照片

Mon, 05 Dec 2011 02:45:12 GMT

其实技术不是最重要的，努力加坚持！

照片

Tue, 29 Nov 2011 16:08:14 GMT

通过几何形圆多次切割结构重构组合的手机图标尝试.

感谢Htear的投稿 :)

CG3

‘小物件，大快乐’

“善念”主题 海报 设计

照片

照片

icon设计

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

照片

canvas基础——斗志的html5学习笔记(3)

照片

照片

“善念”主题海报设计