使用HTML 5和Javascript設(shè)計(jì)繪圖程序
在本文中，將會(huì)介紹如何使用HTML5和Javascript去設(shè)計(jì)一個(gè)簡(jiǎn)單的繪圖程序。HTML5的一個(gè)新的特性是canvas畫(huà)布功能，通過(guò)canvas畫(huà)布的強(qiáng)大功能可以實(shí)現(xiàn)繪畫(huà)不少圖形和其他絢麗的功能。在本文中，讀者將學(xué)習(xí)到如下幾個(gè)知識(shí)點(diǎn)：
1) 如何動(dòng)態(tài)在canvas畫(huà)布上繪畫(huà)圖形
2) HTML 5 canvas的前景特性探討
3) 目前瀏覽器對(duì)HTML5的兼容情況
本文的讀者對(duì)象為，對(duì)HTML 5 Canvas有初步認(rèn)識(shí)及熟悉Javascript的讀者。
設(shè)計(jì)目標(biāo)
首先，我們來(lái)設(shè)計(jì)下這個(gè)繪圖程序?qū)?huì)擁有什么功能。在這個(gè)簡(jiǎn)單的繪圖程序中，首先要有的是一塊能給用戶(hù)涂鴉的畫(huà)布區(qū)域，上面有一只可愛(ài)的小鴨，然后我們準(zhǔn)備了4種不同顏色的蠟筆，可以給用戶(hù)給這只小鴨上色，同時(shí)也要提供橡皮擦的功能，以方便隨時(shí)擦除這個(gè)小鴨。而除了蠟筆外，也提供了普通的油畫(huà)筆的效果，當(dāng)然也指定了每次繪畫(huà)時(shí)筆觸范圍的大小，這里設(shè)定了4個(gè)選擇。設(shè)計(jì)好后的繪圖應(yīng)用，效果如下圖：
在這個(gè)應(yīng)用中，用戶(hù)點(diǎn)左邊的四種顏色筆，就可以在指定的矩形框中隨便涂鴉，也可而已點(diǎn)右面兩種不同的筆觸效果(crayon蠟筆)和普通筆，也可以使用橡皮擦，也可以使用右下角四種不同的筆觸大小。
開(kāi)始使用Canvas畫(huà)布
首先，要聲明一個(gè)canvas畫(huà)布，使用如下代碼聲明：
目前，對(duì)canvas支持的最好的瀏覽器依然是FireFox,Chrome等非IE的瀏覽器，在本文的這個(gè)例子中，也兼顧了對(duì)IE瀏覽器的支持，使用的是一個(gè)開(kāi)源的JS文件，其中提供了一些對(duì)canvas的基本支持腳本(在附件下載中包含了該腳本，名稱(chēng)為excanvas.js)。因此，我們可以同時(shí)也為了兼顧IE，所以這里改用了
的方式，如下代碼：
接下來(lái)，為了要使用canvas畫(huà)布的功能，必須如下調(diào)用：
- context = document.getElementById('canvasInAPerfectWorld').getContext("2d");
然而，同樣為了兼顧在IE下的使用，我們改用以下的代碼段實(shí)現(xiàn)：
- var canvasDiv = document.getElementById('canvasDiv');
- canvas = document.createElement('canvas');
- canvas.setAttribute('width', canvasWidth);
- canvas.setAttribute('height', canvasHeight);
- canvas.setAttribute('id', 'canvas');
- canvasDiv.appendChild(canvas);
- if(typeof G_vmlCanvasManager != 'undefined') {
- canvas = G_vmlCanvasManager.initElement(canvas);
- }
- context = canvas.getContext("2d");
可以看到，在上面的代碼中，通過(guò)document.createElement創(chuàng)建了一個(gè)標(biāo)簽元素canvas，然后再用setAttribute方法設(shè)置了畫(huà)布的高度和寬度等屬性(這些都可以通過(guò)設(shè)置常量屬性值進(jìn)行設(shè)置)。然后通過(guò)
- canvasDiv.appendChild(canvas);
為canvasDiv增加了一個(gè)子元素canvas。然后利用excanvas.js這個(gè)專(zhuān)門(mén)為IE擴(kuò)展的canvas元素包中提供的處理方法initElement進(jìn)行相應(yīng)的判斷處理，即：
- if(typeof G_vmlCanvasManager != 'undefined') {
- canvas = G_vmlCanvasManager.initElement(canvas);
- }
最后，要使用canvas的繪圖功能的話，必須調(diào)用canvas的上下文，這里使用的語(yǔ)句是：
- context = canvas.getContext("2d");
在畫(huà)布上繪畫(huà)圖形
接下來(lái)，我們開(kāi)始在canvas上繪制圖形。這里我們要對(duì)4個(gè)鼠標(biāo)的相關(guān)事件進(jìn)行編碼，并且要編寫(xiě)兩個(gè)相關(guān)的方法addClick和redraw。addClick方法記錄鼠標(biāo)移動(dòng)的點(diǎn)，而redraw方法則將已記錄的數(shù)據(jù)點(diǎn)在canvas畫(huà)布中繪畫(huà)出來(lái)。
先來(lái)看下鼠標(biāo)按下時(shí)的mouse down事件，代碼如下：
- $('#canvas').mousedown(function(e){
- var mouseX = e.pageX - this.offsetLeft;
- var mouseY = e.pageY - this.offsetTop;
- paint = true;
- addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
- redraw();
- });
其中設(shè)置的變量paint為true時(shí)，表明當(dāng)前正在繪制圖形，patint為false時(shí)，表示鼠標(biāo)已經(jīng)松開(kāi)。
再看下鼠標(biāo)移動(dòng)時(shí)的事件，代碼如下：
- $('#canvas').mousemove(function(e){
- if(paint){//是不是按下了鼠標(biāo)
- addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
- redraw();
- }
- });
鼠標(biāo)松開(kāi)時(shí)的事件代碼為：
- $('#canvas').mouseup(function(e){
- paint = false;
- });
鼠標(biāo)移開(kāi)的事件代碼為：
- $('#canvas').mouseleave(function(e){
- paint = false;
- });
下面是addClick方法的代碼如下：
- var clickX = new Array();
- var clickY = new Array();
- var clickDrag = new Array();
- var paint;
- function addClick(x, y, dragging)
- {
- clickX.push(x);
- clickY.push(y);
- clickDrag.push(dragging);
- }
可以看到，這里分別用三個(gè)數(shù)組clickX,clickY及clickDrag記錄了鼠標(biāo)移動(dòng)的點(diǎn)的X，Y坐標(biāo)，以及判斷是否鼠標(biāo)松開(kāi)的標(biāo)志。
再來(lái)看下redraw這個(gè)方法，其作用為每次都清空畫(huà)板，然后重新把所有的點(diǎn)都畫(huà)過(guò)，效率不高，但作為本例子來(lái)說(shuō)還是可以接受，代碼如下：
- function redraw(){
- canvas.width = canvas.width; // Clears the canvas
- context.strokeStyle = "#df4b26";
- context.lineJoin = "round";
- context.lineWidth = 5;
- for(var i=0; i < clickX.length; i++)
- {
- context.beginPath();
- if(clickDrag[i] && i){//當(dāng)是拖動(dòng)而且i!=0時(shí)，從上一個(gè)點(diǎn)開(kāi)始畫(huà)線。
- context.moveTo(clickX[i-1], clickY[i-1]);
- }else{
- context.moveTo(clickX[i]-1, clickY[i]);
- }
- context.lineTo(clickX[i], clickY[i]);
- context.closePath();
- context.stroke();
- }
- }
接下來(lái)，再定義四種不同的顏色：紫色，綠色，棕色和黃色，分別用四個(gè)不同的變量表示，并且用變量curColor保存當(dāng)前正在使用的顏色，并且也用一個(gè)數(shù)組clickColor來(lái)記錄用戶(hù)每次選擇的顏色。代碼如下：
- var colorPurple = "#cb3594";
- var colorGreen = "#659b41";
- var colorYellow = "#ffcf33";
- var colorBrown = "#986928";
- var curColor = colorPurple;
- var clickColor = new Array();
同樣，在addClick方法中，也必須加入對(duì)用戶(hù)每次選擇顏色的記錄，所以更新后的addclick代碼如下：
- function addClick(x, y, dragging)
- {
- clickX.push(x);
- clickY.push(y);
- clickDrag.push(dragging);
- clickColor.push(curColor);
- }
而在redraw的方法中，我們?nèi)サ鬰ontext.strokeStyle一句，將繪畫(huà)筆的顏色設(shè)置到for循環(huán)中去設(shè)置，更新后的redraw代碼如下：
- function redraw(){
- /* context.strokeStyle = "#df4b26"; */
- context.lineJoin = "round";
- context.lineWidth = 5;
- for(var i=0; i < clickX.length; i++)
- {
- context.beginPath();
- if(clickDrag[i] && i){
- contex.moveTo(clickX[i-1], clickY[i-1]);
- }else{
- context.moveTo(clickX[i]-1, clickY[i]);
- }
- context.lineTo(clickX[i], clickY[i]);
- context.closePath();
- context.strokeStyle = clickColor[i];
- context.stroke();
- }
- }
我們?cè)僭O(shè)置畫(huà)筆每次繪畫(huà)筆觸范圍的大小，同樣，有四種選擇，分別為小，中，大和很大，并用clickSize數(shù)組記錄用戶(hù)的選擇，默認(rèn)的筆觸范圍大小用curSize進(jìn)行記錄。并且也要更新redraw方法，更新后的addClick,redraw代碼如下：
- function addClick(x, y, dragging)
- {
- clickX.push(x);
- clickY.push(y);
- clickDrag.push(dragging);
- clickColor.push(curColor);
- clickSize.push(curSize);
- }
- var radius;
- var i = 0;
- for(; i < clickX.length; i++)
- {
- if(clickSize[i] == "small"){
- radius = 2;
- }else if(clickSize[i] == "normal"){
- radius = 5;
- }else if(clickSize[i] == "large"){
- radius = 10;
- }else if(clickSize[i] == "huge"){
- radius = 20;
- }else{
- alert("Error: Radius is zero for click " + i);
- radius = 0;
- }
- function redraw(){
- ........
- context.strokeStyle = clickColor[i];
- context.lineWidth = radius;
- context.stroke();
- }
- }
最后，我們?cè)O(shè)置不同筆的繪畫(huà)效果，分別是蠟筆和普通筆以及橡皮擦功能。用clickTool記錄用戶(hù)選擇的工具種類(lèi)，curTool則為當(dāng)前用戶(hù)選擇的工具，addClick的方法如下：
- function addClick(x, y, dragging)
- {
- clickX.push(x);
- clickY.push(y);
- clickDrag.push(dragging);
- if(curTool == "eraser"){
- clickColor.push("white");
- }else{
- clickColor.push(curColor);
- }
- clickColor.push(curColor);
- clickSize.push(curSize);
- }
注意，這里判斷如果用戶(hù)選擇的工具是橡皮擦，則將白色加入到clickColor數(shù)組中。同樣要在redraw的方法中對(duì)新的兩個(gè)繪圖工具進(jìn)行處理，代碼如下：
- function redraw(){
- context.lineJoin = "round";
- for(var i=0; i < clickX.length; i++)
- {
- context.beginPath();
- if(clickDrag[i] && i){
- context.moveTo(clickX[i-1], clickY[i-1]);
- }else{
- context.moveTo(clickX[i]-1, clickY[i]);
- }
- context.lineTo(clickX[i], clickY[i]);
- context.closePath();
- context.strokeStyle = clickColor[i];
- context.lineWidth = radius;
- context.stroke();
- }
- if(curTool == "crayon") {
- context.globalAlpha = 0.4;
- context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight);
- }
- context.globalAlpha = 1;
- }
這里針對(duì)當(dāng)用戶(hù)選擇“crazyon”蠟筆效果時(shí)，對(duì)繪畫(huà)的效果進(jìn)行了透明度的處理。
最后，我們要把小鴨子的圖在畫(huà)布中畫(huà)上，首先要聲明一個(gè)圖片對(duì)象如下：
- var outlineImage = new Image();
然后在prepareCanvas()方法中加載事先準(zhǔn)備好的圖片：
- function prepareCanvas(){
- ...
- outlineImage.src = "images/watermelon-duck-outline.png";
- }
最后在redraw的繪畫(huà)方法中，要使用canvas畫(huà)布的drawImage方法進(jìn)行繪畫(huà)，代碼為：
- function redraw(){
- ...
- context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
- }
其中drawingAreaX, drawingAreaY為要在哪個(gè)具體位置繪畫(huà)圖形，drawingAreaWidth和
drawingAreaHeight則為具體圖片的寬度和高度。
我們還要把繪圖的區(qū)域限制在一個(gè)矩形框里，這要用到畫(huà)布的save和clip方法。其中save用來(lái)保存Canvas的狀態(tài),而clip方法則是指定一個(gè)區(qū)域進(jìn)行剪裁，規(guī)定了繪畫(huà)的區(qū)域，代碼如下：
- function redraw()
- {
- ...
- context.save();
- context.beginPath();
- context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
- context.clip(); //剪裁出指定的繪畫(huà)區(qū)域
- var radius;
- var i = 0;
- for(; i < clickX.length; i++)
- {
- ...
- }
- context.restore(); //使用restore方法，恢復(fù)每次保存的canvas狀態(tài)
- ...
- }
總結(jié)
本文中只是對(duì)如何使用HTML5和javascript繪制小繪圖應(yīng)用進(jìn)行了思路和基本技術(shù)點(diǎn)的分析，其中著重介紹了畫(huà)布canvas的各種使用方法，完整的代碼請(qǐng)到這里下載
(http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/downloads/html5-canvas-drawing-app.zip )，代碼中完成實(shí)現(xiàn)了相關(guān)的各種功能，并加入了一些邏輯判斷等操作，由于篇幅關(guān)系，不再在文中詳細(xì)描述。
原文：http://tech.it168.com/a2011/1104/1269/000001269250_all.shtml
【編輯推薦】
