|
HTML5 的Cavans API可以动态来展示图形、图表、图像以及动画，我们的这个离线系统中，主要用来设计Logo用的。在网页上使用Canvas的时，他会创建一块矩形区域，默认情况下宽为300像素，高为150像素，当然，可以自定义。 因为我们离线系统主要职责用于在离线的情况下的工作系统，如在上面写工作日志，工作计划，和保存项目的评估数据；在网络在线的情况下与服务器交互，并将数据保存到Server的数据库中。所以我们的这个离线系统被命名为OFLMAIL，我们就根据这个名字来设计Logo。 canvas中的坐标是从左上角开始的，X轴从左到右横向延伸，Y轴从上到下垂直延伸。通过坐标的刻量度来定位它的位置。
我们先在页面上放置一个canvas元素： <canvas id="canvas" width="380" height="35">Sorry, canvas not supported...</canvas>
使用canvas编程，首先要获取其上下文context。 function MakeLogo() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); } }
我们的第一个字是 O ,所以我们先把 O 字符画出来，使用画圆函数即可： context . arc(x, y, radius, startAngle, endAngle, anticlockwise) 参数分别是： X:横轴坐标位置 ； Y:纵轴坐标位置 ； 圆开始的角度 ； 圆闭合的角度 ； 是否逆时针绘制（true or false） ； ctx.arc(17, 17, 15, 0, 9.42, true); // 开始画圆 ctx.lineWidth = 3; //线条的粗细程度 ctx.lineJoin = 'round';返回或设置线段的连接方式,默认为miter
ctx.lineCap = 'round';//context.lineCap 返回或设置线段的箭头样式，仅有三个选项：butt(默认值),round,square;
ctx.strokeStyle = '#23A1DD';//填充的颜色 ctx.shadowBlur = 4; //阴影模糊程度，默认为0，数值越大，模糊程度越高，感觉越明显 ctx.shadowColor = '#909090'; //阴影颜色 ctx.shadowOffsetX = 1; //横轴的阴影像素 ctx.shadowOffsetY = 1; //纵轴的阴影像素
//创建字符F ctx.moveTo(41,35); //将数据上下文的位置移动到（41，35）的坐标位置 ctx.lineTo(41, 2); //将数据上下文的位置移动到（41，35）的坐标位置 ctx.lineTo(61,2); ctx.moveTo(41,15); ctx.lineTo(71,15);
ctx.stroke();//stroke方法使用lineWidth，lineCap，lineJoin，以及strokeStyle对所有的子路径进行填充 ctx.save();//保存数据上下文 效果如下：
//继续在上面描画L和M字符 ctx.moveTo(77, -1); //Create the L ctx.lineTo(77, 32); ctx.lineTo(102, 32); ctx.moveTo(103, 34); //Create the M ctx.lineTo(103, 0); ctx.lineTo(120, 20); ctx.lineTo(137, 0); ctx.lineTo(137, 34); 最后效果如下：
// 这时我们要在上面填充一个图片，来代替A字符， // context.beginPath() //清空子路径 // context.closePath() //闭合路径
ctx.beginPath(); //开始执行路径，这样做的好处是清除当前的路径.开始执行新的路径，原来的一些设定都会被清除 ctx.moveTo(145, 2); var img1 = new Image(); img1.src = "../Images/1.png"; img1.onload = function () { ctx.drawImage(img1, 145, 2); //drawImage函数的参数，drawImage(image,dx,dy) //image：传入图像 dx：左坐标 dy：左坐标 ctx.stroke(); ctx.save(); } 最后效果如下：
当然，这个三角形图片也可以直接用context画出来，我们这边有图片，直接用图片载入就行了。
最后，我们运用同样的方法，完成上面那个Logo的剩余部分： ctx.beginPath(); //Create the I ctx.shadowBlur = 4; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0;
ctx.moveTo(202, 3); //Create the O ctx.strokeStyle = '#23A1DD'; ctx.fillStyle = '#23A1DD'; ctx.arc(185, 3, 3, 0, Math.PI * 2, true); ctx.fill(); ctx.save();
ctx.beginPath(); ctx.moveTo(185, 35); ctx.lineTo(185, 10);
ctx.moveTo(200, 0); ctx.lineTo(200, 33); ctx.lineTo(222, 33); ctx.save(); ctx.stroke();
ctx.beginPath();
ctx.shadowBlur = 1; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0;
最终我们的小清新Logo是这样子的：
根据W3C建议，如果只是简单的文字和图片的描述，用 H 标签就可以解决了，图片也可以用其他元素内嵌到标签里面。 所以我们这个图标用canvas 动态生成有点更繁琐，但是在多元化的Logo图标中，就是要用到canvas的一些特性，如： 转换：Transformations, context.rotate(angle) context.scale(float x, float y); 横轴和纵轴的放大或缩小，1.0 是 1：1的比例， 数值越大，放大越大。 如：context.scale(1.0,1.0)：
context.scale(5.0,5.0)：
context.translate(x, y) //可以理解为偏移，向x,y方向偏移指定的量,其用来移动Canvas的原点到一个指定的值 context.strokeStyle = "#9CFF00"; context.translate(50 + j * 100, 50 + i * 100); drawSpirograph(context, 20 * (j + 2) / (j + 1), -8 * (i + 3) / (i + 1), 10); context.restore();
Canvas API还提供了很多的函数，用来协助处理和设计各种各样的图像。 还有一个比较有趣的就是动画了，在HTML5 Canvas API 中，Canvas的清除矩形功能是创建动画和游戏的核心功能。通过反复废置和清除Canvas片段，就可以实现动画效果，大家不妨试一下。
附件中有关于这个Logo的源码和HTML5Canvas API的书籍，可以参考一下。 |
|
|
