HTML5的canvas繪圖技術詳解
本篇教程探討了HTML5的canvas繪圖技術詳解，希望閱讀本篇文章以後大家有所收穫，幫助大家HTML5+CSS3從入門到精通 。
canvas元素是HTML5中新添加的一個元素，該元素是HTML5中的一個亮點。Canvas元素就像一塊畫布，通過該元素自帶的API結合JavaScript代碼可以繪製各種圖形和圖像以及動畫效果。
1.1 瀏覽器不兼容問題
ie9以上才支持canvas, 其他chrome、firefox、蘋果瀏覽器等都支持
只要瀏覽器兼容canvas，那麼就會支持絕大部分api(個別最新api除外)
移動端的兼容情況非常理想，基本上隨便使用
2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
如果瀏覽器不兼容，最好進行友好提示，提示內容只有在瀏覽器不支持時才顯示。
//例如：
你的瀏覽器不支持canvas，請升級瀏覽器
瀏覽器不兼容，也可以使用flash等手段進行優雅降級
1.2 創建畫布
在頁面中創建canvas元素與創建其他元素一樣，只需要添加一個標記即可。該元素默認的寬高為300*15，可以通過元素的width屬性和height屬性改變默認的寬高。
注意：
不能使用CSS樣式控制canvas元素的寬高，否則會導致繪製的圖形拉伸。
重新設置canvas標籤的寬高屬性會導致畫布擦除所有的內容。
可以給canvas畫布設置背景色
1.3 canvas坐標系
在開始繪製任何圖像之前，我們先講一下canvas的坐標系。canvas坐標系是以左上角0,0處為坐標原點，水平方向為x軸，向右為正；垂直方向為y軸，向下為正。如下圖所示：
1.4 繪製線徑
獲取上下文對象(CanvasRenderingContext2D)
首先，獲取canvas元素，然後調用元素的getContext(「2d」)方法，該方法返回一個CanvasRenderingContext2D對象，使用該對象就可以在畫布上繪圖了。
var mcanvas = document.getElementById("mcanvas");
var mcontext = mcanvas.getContext("2d");
2.設置繪製起點(moveTo)
//語法：
ctx.moveTo(x, y);
* 解釋：設置上下文繪製路徑的起點。相當於移動畫筆到某個位置。
* 參數：x,y 都是相對於 canvas坐標系的原點（左上角）。
* 注意： 繪製線段前必須先設置起點，不然繪製無效。如果不進行設置，就會使用lineTo的坐標當作moveTo
3.繪製直線(lineTo)
//語法：
ctx.lineTo(x, y);
* 解釋：從上一步設置的繪製起點繪製一條直線到(x, y)點。
* 參數：x,y 目標點坐標。
4.路徑的開始和閉合
//開始路徑：
ctx.beginPath();
//閉合路徑：
ctx.closePath();
* 解釋：如果繪製路徑比較複雜，必須使用路徑開始和結束。閉合路徑會自動把最後的線頭和開始的線頭連在一起。
* beginPath: 核心的作用是將不同繪製的形狀進行隔離，每次執行此方法，表示重新繪製一個路徑，跟之前的繪製的墨跡可以進行分開樣式設置和管理。
5.繪製圖形(stroke)
//語法：
ctx.stroke();
* 解釋：根據路徑繪製線。路徑只是草稿，真正繪製線必須執行stroke
在繪製之前，還可以對畫筆的顏色和粗細進行設置進行設置，方法如下：
//語法：
ctx.strokeStyle = 「#ff0000」;
ctx.lineWidth = 4; //值為不帶單位的數字，並且大於0
6.填充圖形(fill)
//語法：
ctx.fill();
* 解釋：對已經畫好的圖形進行填充顏色。
在填充之前，同樣可以對所填充的顏色進行設置，方法如下：
//語法：
ctx.fileStyle = 「#0000ff」;
7.canvas繪製的基本步驟：
第一步：獲得上下文 =>canvasElem.getContext("2d");
第二步：開始路徑規劃 =>ctx.beginPath()
第三步：移動起始點 =>ctx.moveTo(x, y)
第四步：繪製線(線條、矩形、圓形、圖片...) =>ctx.lineTo(x, y)
第五步：閉合路徑 =>ctx.closePath();
第六步：繪製描邊 =>ctx.stroke();
案例：通過上面所學的方法繪製一個三角形。
你的瀏覽器不支持canvas，請升級瀏覽器
案例：理解canvas基於狀態的繪圖
你的瀏覽器不支持canvas，請升級瀏覽器
1.6 繪製圓形
arc() 方法用於創建弧線（用於創建圓或部分圓）。
語法：ctx.arc(x, y, r, startAngle, endAngle, counterclockwise);
解釋：
x,y：圓心坐標。
r：半徑大小。
sAngle:繪製開始的角度。 圓心到最右邊點是0度，順時針方向弧度增大。
eAngel:結束的角度，注意是弧度。
counterclockwise：是否是逆時針，默認是false。true是逆時針，false：順時針
注意：弧度和角度的轉換公式： rad = deg*Math.PI/180;
繪製圓形和餅圖
你的瀏覽器不支持canvas，請升級瀏覽器
三角函數的補充：
Math.sin(弧度); //夾角對面的邊 和 斜邊的比值
Math.cos(弧度); //夾角側邊與斜邊的比值
圓形上面的點的坐標的計算公式
x =x0 + Math.cos(rad) * R;//x0和y0是圓心點坐標
y =y0 + Math.sin(rad) * R;//注意都是弧度
1.7 繪製文字
canvas 提供了兩種方法來渲染文本:
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，繪製的最大寬度是可選的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置繪製文本邊框，繪製的最大寬度是可選的.
示例1
文本用當前的填充方式被填充：
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
示例2
文本用當前的邊框樣式被繪製：
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.strokeText("Hello world", 10, 50);
文本樣式
font = value: 當前我們用來繪製文本的樣式. 這個字元串使用和 CSS font 屬性相同的語法. 默認的字體是 10px sans-serif。
textAlign = value: 文本對齊選項. 可選的值包括：start, end, left, right or center. 默認值是 start。
textBaseline = value: 基線對齊選項. 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認值是 alphabetic。
代碼示例：
你的瀏覽器不支持canvas，請升級瀏覽器
1.8繪製圖像
1.基本繪製圖片的方式
context.drawImage(img,x,y);
參數說明： x,y 繪製圖片左上角的坐標， img是繪製圖片的dom對象。
2.在畫布上繪製圖像，並規定圖像的寬度和高度
context.drawImage(img,x,y,width,height);
參數說明：width 繪製圖片的寬度， height：繪製圖片的高度
如果指定寬高，最好成比例，不然圖片會被拉伸
設置高 = 原高度 * 設置寬/ 原寬度;
3.圖片裁剪，並在畫布上定位被裁剪的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
參數說明：
sx,sy 裁剪的左上角坐標，
swidth：裁剪圖片的高度。 sheight:裁剪的高度
其他同上
4.用javascript創建img對象
上面提供的3個方法，都需要一個Image對象作為參數，下面介紹了幾種創建Image對象的方式。需要注意的是，為Image的src屬性賦值後，Image對象會去裝載指定圖片，但這種裝載是非同步的，如果圖片太大或則圖片來自網路，且網路傳輸速度慢，Image對象裝載圖片就會需要：一定的時間開銷。為了保證圖片裝載完成後才去繪製圖片，可以監聽Image對象的onload回調事件，然後在事件處理函數中繪製圖片，如下所示：
第一種方式：
var img = document.getElementById("imgId");
img.onload = function(){ //圖片載入完成後，執行此方法
mcontext.drawImage(img, 10, 10);
}
第二種方式：
var img = document.createElement("img");
img.src = "img/a.jpg";
img.alt = "誰笑誰是小狗";
img.onload = function(){ //圖片載入完成後，執行此方法
mcontext.drawImage(img, 10, 10);
}
第三種方式：
var img = new Image();//這個就是 img標籤的dom對象
img.src = "imgs/arc.gif";
img.alt = "誰笑誰是小狗";
img.onload = function() { //圖片載入完成後，執行此方法
}
本文由職坐標整理並發布，希望對同學們有所幫助。了解更多詳情請關注職坐標WEB前端HTML5/CSS3頻道！
TAG:職坐標在線 |