|
HTML5 的Cavans API可以動(dòng)態(tài)來(lái)展示圖形、圖表、圖像以及動(dòng)畫(huà)，我們的這個(gè)離線系統(tǒng)中，主要用來(lái)設(shè)計(jì)Logo用的。在網(wǎng)頁(yè)上使用Canvas的時(shí)，他會(huì)創(chuàng)建一塊矩形區(qū)域，默認(rèn)情況下寬為300像素，高為150像素，當(dāng)然，可以自定義。 因?yàn)槲覀冸x線系統(tǒng)主要職責(zé)用于在離線的情況下的工作系統(tǒng)，如在上面寫(xiě)工作日志，工作計(jì)劃，和保存項(xiàng)目的評(píng)估數(shù)據(jù)；在網(wǎng)絡(luò)在線的情況下與服務(wù)器交互，并將數(shù)據(jù)保存到Server的數(shù)據(jù)庫(kù)中。所以我們的這個(gè)離線系統(tǒng)被命名為OFLMAIL，我們就根據(jù)這個(gè)名字來(lái)設(shè)計(jì)Logo。 canvas中的坐標(biāo)是從左上角開(kāi)始的，X軸從左到右橫向延伸，Y軸從上到下垂直延伸。通過(guò)坐標(biāo)的刻量度來(lái)定位它的位置。
我們先在頁(yè)面上放置一個(gè)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"); } }
我們的第一個(gè)字是 O ,所以我們先把 O 字符畫(huà)出來(lái)，使用畫(huà)圓函數(shù)即可： context . arc(x, y, radius, startAngle, endAngle, anticlockwise) 參數(shù)分別是： X:橫軸坐標(biāo)位置 ； Y:縱軸坐標(biāo)位置 ； 圓開(kāi)始的角度 ； 圓閉合的角度 ； 是否逆時(shí)針繪制（true or false） ； ctx.arc(17, 17, 15, 0, 9.42, true); // 開(kāi)始畫(huà)圓 ctx.lineWidth = 3; //線條的粗細(xì)程度 ctx.lineJoin = 'round';返回或設(shè)置線段的連接方式,默認(rèn)為miter
ctx.lineCap = 'round';//context.lineCap 返回或設(shè)置線段的箭頭樣式，僅有三個(gè)選項(xiàng)：butt(默認(rèn)值),round,square;
ctx.strokeStyle = '#23A1DD';//填充的顏色 ctx.shadowBlur = 4; //陰影模糊程度，默認(rèn)為0，數(shù)值越大，模糊程度越高，感覺(jué)越明顯 ctx.shadowColor = '#909090'; //陰影顏色 ctx.shadowOffsetX = 1; //橫軸的陰影像素 ctx.shadowOffsetY = 1; //縱軸的陰影像素
//創(chuàng)建字符F ctx.moveTo(41,35); //將數(shù)據(jù)上下文的位置移動(dòng)到（41，35）的坐標(biāo)位置 ctx.lineTo(41, 2); //將數(shù)據(jù)上下文的位置移動(dòng)到（41，35）的坐標(biāo)位置 ctx.lineTo(61,2); ctx.moveTo(41,15); ctx.lineTo(71,15);
ctx.stroke();//stroke方法使用lineWidth，lineCap，lineJoin，以及strokeStyle對(duì)所有的子路徑進(jìn)行填充 ctx.save();//保存數(shù)據(jù)上下文 效果如下：
//繼續(xù)在上面描畫(huà)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); 最后效果如下：
// 這時(shí)我們要在上面填充一個(gè)圖片，來(lái)代替A字符， // context.beginPath() //清空子路徑 // context.closePath() //閉合路徑
ctx.beginPath(); //開(kāi)始執(zhí)行路徑，這樣做的好處是清除當(dāng)前的路徑.開(kāi)始執(zhí)行新的路徑，原來(lái)的一些設(shè)定都會(huì)被清除 ctx.moveTo(145, 2); var img1 = new Image(); img1.src = "../Images/1.png"; img1.onload = function () { ctx.drawImage(img1, 145, 2); //drawImage函數(shù)的參數(shù)，drawImage(image,dx,dy) //image：傳入圖像 dx：左坐標(biāo) dy：左坐標(biāo) ctx.stroke(); ctx.save(); } 最后效果如下：
當(dāng)然，這個(gè)三角形圖片也可以直接用context畫(huà)出來(lái)，我們這邊有圖片，直接用圖片載入就行了。
最后，我們運(yùn)用同樣的方法，完成上面那個(gè)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是這樣子的：
根據(jù)W3C建議，如果只是簡(jiǎn)單的文字和圖片的描述，用 H 標(biāo)簽就可以解決了，圖片也可以用其他元素內(nèi)嵌到標(biāo)簽里面。 所以我們這個(gè)圖標(biāo)用canvas 動(dòng)態(tài)生成有點(diǎn)更繁瑣，但是在多元化的Logo圖標(biāo)中，就是要用到canvas的一些特性，如： 轉(zhuǎn)換：Transformations, context.rotate(angle) context.scale(float x, float y); 橫軸和縱軸的放大或縮小，1.0 是 1：1的比例， 數(shù)值越大，放大越大。 如：context.scale(1.0,1.0)：
context.scale(5.0,5.0)：
context.translate(x, y) //可以理解為偏移，向x,y方向偏移指定的量,其用來(lái)移動(dòng)Canvas的原點(diǎn)到一個(gè)指定的值 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還提供了很多的函數(shù)，用來(lái)協(xié)助處理和設(shè)計(jì)各種各樣的圖像。 還有一個(gè)比較有趣的就是動(dòng)畫(huà)了，在HTML5 Canvas API 中，Canvas的清除矩形功能是創(chuàng)建動(dòng)畫(huà)和游戲的核心功能。通過(guò)反復(fù)廢置和清除Canvas片段，就可以實(shí)現(xiàn)動(dòng)畫(huà)效果，大家不妨試一下。
附件中有關(guān)于這個(gè)Logo的源碼和HTML5Canvas API的書(shū)籍，可以參考一下。 |
|
|
來(lái)自： 緣夢(mèng)書(shū)摘 > 《HTML5》
