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
| miter |
線段在連接處外側延伸直至交於一點，為默認值，外延效果受miterLimit的值影響，當外延交 點距離大於限制值時，則表現為bevel風格 |
| round |
連接處是一個圓角,圓的半徑等於線寬 |
| bevel |
連接處為斜角 |
ctx.lineCap = 'round';//context.lineCap 返回或設置線段的箭頭樣式，僅有三個選項：butt(默認值),round,square;
| 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的書籍，可以參考一下。