H5的canvas繪圖技術(shù)

canvas元素是HTML5中新添加的一個元素，該元素是HTML5中的一個亮點。Canvas元素就像一塊畫布，通過該元素自帶的API結(jié)合JavaScript代碼可以繪制各種圖形和圖像以及動畫效果。

?

1.1?瀏覽器不兼容問題

• ie9以上才支持canvas,?其他chrome、firefox、蘋果瀏覽器等都支持
• ?只要瀏覽器兼容canvas，那么就會支持絕大部分api(個別最新api除外)
• ?移動端的兼容情況非常理想，基本上隨便使用
• ?2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
• ?如果瀏覽器不兼容，最好進行友好提示，提示內(nèi)容只有在瀏覽器不支持時才顯示。

//例如： <canvas id="cavsElem">你的瀏覽器不支持canvas，請升級瀏覽器</canvas>

?瀏覽器不兼容，也可以使用flash等手段進行優(yōu)雅降級

1.2?創(chuàng)建畫布

在頁面中創(chuàng)建canvas元素與創(chuàng)建其他元素一樣，只需要添加一個<canvas>標(biāo)記即可。該元素默認(rèn)的寬高為300*15，可以通過元素的width屬性和height屬性改變默認(rèn)的寬高。

注意：

• ?不能使用CSS樣式控制canvas元素的寬高，否則會導(dǎo)致繪制的圖形拉伸。

?

• 重新設(shè)置canvas標(biāo)簽的寬高屬性會導(dǎo)致畫布擦除所有的內(nèi)容。

?

• 可以給canvas畫布設(shè)置背景色

1.3?canvas坐標(biāo)系

在開始繪制任何圖像之前，我們先講一下canvas的坐標(biāo)系。canvas坐標(biāo)系是以左上角0,0處為坐標(biāo)原點，水平方向為x軸，向右為正；垂直方向為y軸，向下為正。如下圖所示：

1.4?繪制線徑

獲取上下文對象(CanvasRenderingContext2D)

首先，獲取canvas元素，然后調(diào)用元素的getContext(“2d”)方法，該方法返回一個CanvasRenderingContext2D對象，使用該對象就可以在畫布上繪圖了。

?

var mcanvas = document.getElementById("mcanvas"); var mcontext = mcanvas.getContext("2d");

　　2.設(shè)置繪制起點(moveTo)

//語法： ctx.moveTo(x, y);

*?解釋：設(shè)置上下文繪制路徑的起點。相當(dāng)于移動畫筆到某個位置。

*?參數(shù)：x,y?都是相對于?canvas坐標(biāo)系的原點（左上角）。

*?注意： 繪制線段前必須先設(shè)置起點，不然繪制無效。如果不進行設(shè)置，就會使用lineTo的坐標(biāo)當(dāng)作moveTo

3.繪制直線(lineTo)

//語法： ctx.lineTo(x, y);

*?解釋：從上一步設(shè)置的繪制起點繪制一條直線到(x, y)點。

*?參數(shù)：x,y?目標(biāo)點坐標(biāo)。

4.路徑的開始和閉合

//開始路徑： ctx.beginPath(); //閉合路徑： ctx.closePath();

*?解釋：如果繪制路徑比較復(fù)雜，必須使用路徑開始和結(jié)束。閉合路徑會自動把最后的線頭和開始的線頭連在一起。

* beginPath:?核心的作用是將不同繪制的形狀進行隔離，每次執(zhí)行此方法，表示重新繪制一個路徑，跟之前的繪制的墨跡可以進行分開樣式設(shè)置和管理。

5.繪制圖形(stroke)

//語法： ctx.stroke();

*?解釋：根據(jù)路徑繪制線。路徑只是草稿，真正繪制線必須執(zhí)行stroke

?

在繪制之前，還可以對畫筆的顏色和粗細(xì)進行設(shè)置進行設(shè)置，方法如下：

//語法： ctx.strokeStyle = “#ff0000”; ctx.lineWidth = 4; //值為不帶單位的數(shù)字，并且大于0

6.填充圖形(fill)

//語法： ctx.fill();

*?解釋：對已經(jīng)畫好的圖形進行填充顏色。

?

在填充之前，同樣可以對所填充的顏色進行設(shè)置，方法如下：

//語法： ctx.fileStyle = “#0000ff”;

7.canvas繪制的基本步驟：

?

第一步：獲得上下文?=>canvasElem.getContext('2d');

?

第二步：開始路徑規(guī)劃?=>ctx.beginPath()

?

第三步：移動起始點?=>ctx.moveTo(x, y)

?

第四步：繪制線(線條、矩形、圓形、圖片...) =>ctx.lineTo(x, y)

?

第五步：閉合路徑?=>ctx.closePath();

?

第六步：繪制描邊?=>ctx.stroke();

?

案例：通過上面所學(xué)的方法繪制一個三角形。

<canvas id="mcanvas">你的瀏覽器不支持canvas，請升級瀏覽器</canvas><script>var mcanvas = document.getElementById("mcanvas"); //獲得畫布var mcontext = mcanvas.getContext("2d"); //獲得上下文mcanvas.width = 900; //重新設(shè)置標(biāo)簽的屬性寬高mcanvas.height = 600; //千萬不要用 canvas.style.heightmcanvas.style.border = "1px solid #000"; //設(shè)置canvas的邊//繪制三角形mcontext.beginPath(); //開始路徑mcontext.moveTo(100,100); //三角形，左頂點mcontext.lineTo(300, 100); //右頂點mcontext.lineTo(300, 300); //底部的點mcontext.closePath(); //結(jié)束路徑mcontext.stroke(); //描邊路徑</script>

案例：理解canvas基于狀態(tài)的繪圖

?

<canvas id="mcanvas">你的瀏覽器不支持canvas，請升級瀏覽器</canvas><script>var mcanvas = document.getElementById("mcanvas"); //獲得畫布var mcontext = mcanvas.getContext("2d"); //獲得上下文

?

mcanvas.width = 900; //重新設(shè)置標(biāo)簽的屬性寬高mcanvas.height = 600; //千萬不要用 canvas.style.heightmcanvas.style.border = "1px solid #000"; //設(shè)置canvas的邊mcontext.strokeStyle = "#ff0000"; //設(shè)置畫筆的顏色mcontext.lineWidth = 2; //設(shè)置畫筆的粗細(xì)mcontext.fillStyle = "#00ff00"; //設(shè)置填充圖形的顏色//繪制三角形mcontext.beginPath(); //開始路徑mcontext.moveTo(100,100); //三角形，左頂點mcontext.lineTo(300, 100); //右頂點mcontext.lineTo(300, 300); //底部的點mcontext.closePath(); //結(jié)束路徑mcontext.stroke(); //描邊路徑 //mcontext.fill(); //填充圖形//繪制矩形mcontext.beginPath(); //開啟了一個新狀態(tài)（新線徑），//新狀態(tài)可以繼承之前狀態(tài)的樣式，//但是當(dāng)前狀態(tài)設(shè)置的所有樣式只能用于當(dāng)前狀態(tài)。//mcontext.strokeStyle = "#00ff00";//為當(dāng)前狀態(tài)設(shè)置的樣式mcontext.moveTo(500,100); //起始點mcontext.lineTo(800,100); //上邊mcontext.lineTo(800,300); //右邊mcontext.lineTo(500,300); //下邊mcontext.closePath();mcontext.stroke();

1.5?繪制矩形

快速創(chuàng)建矩形rect()方法

?

語法：ctx.rect(x, y, width, height);

?

*?解釋：x, y是矩形左上角坐標(biāo)，?width和height都是以像素計

* rect方法只是規(guī)劃了矩形的路徑，并沒有填充和描邊。

2.創(chuàng)建描邊矩形

?

?

?

語法：ctx.strokeRect(x, y, width, height);

?

參數(shù)跟rect(x, y, width, height)相同，注意此方法繪制完路徑后立即進行stroke繪制。

3.創(chuàng)建填充矩形

語法：ctx.fillRect(x, y, width, height);

參數(shù)跟rect(x, y, width, height)相同， 此方法執(zhí)行完成后，立即對當(dāng)前矩形進行fill填充。

4.清除矩形（clearReact）

?

語法：ctx.clearRect(x, y, width, hegiht);

?

*?解釋：清除某個矩形內(nèi)的繪制的內(nèi)容，相當(dāng)于橡皮擦。

?

<canvas id="mcanvas">你的瀏覽器不支持canvas，請升級瀏覽器</canvas><script>var mcanvas = document.getElementById("mcanvas"); //獲得畫布var mcontext = mcanvas.getContext("2d"); //獲得上下文mcanvas.width = 900; //重新設(shè)置標(biāo)簽的屬性寬高mcanvas.height = 600; //千萬不要用 canvas.style.height//rect方法只是規(guī)劃了矩形的路徑，并沒有填充和描邊，需要單獨描邊或填充。mcontext.rect(20,20,300,200);mcontext.stroke();//快速創(chuàng)建一個描邊的矩形mcontext.strokeRect(400,20,300,200);//快速創(chuàng)建一個填充的矩形mcontext.fillRect(20,300,300,200);//在畫布上創(chuàng)建一個矩形區(qū)域，該矩形區(qū)域中的圖形都會被清除mcontext.clearRect(120,350,100,100);</script>

1.6?繪制圓形

arc()?方法用于創(chuàng)建弧線（用于創(chuàng)建圓或部分圓）。

?

語法：ctx.arc(x, y, r, startAngle, endAngle, counterclockwise);

?

解釋： x,y：圓心坐標(biāo)。 r：半徑大小。 sAngle:繪制開始的角度。 圓心到最右邊點是0度，順時針方向弧度增大。 eAngel:結(jié)束的角度，注意是弧度。 counterclockwise：是否是逆時針，默認(rèn)是false。true是逆時針，false：順時針注意：弧度和角度的轉(zhuǎn)換公式： rad = deg*Math.PI/180;

繪制圓形和餅圖

<canvas id="mcanvas">你的瀏覽器不支持canvas，請升級瀏覽器</canvas><script>var mcanvas = document.getElementById("mcanvas"); //獲得畫布var mcontext = mcanvas.getContext("2d"); //獲得上下文mcanvas.width = 900; mcanvas.height = 600; //繪制圓形 mcontext.beginPath();mcontext.arc(200,200,100,0,360*Math.PI/180);mcontext.closePath();mcontext.stroke();// 通過數(shù)據(jù)進行繪制餅圖var data = [{"value": .2,"color": "red","title": "應(yīng)屆生"},{"value": .3,"color": "blue","title": "社會招生"},{"value": .4,"color": "green","title": "老學(xué)員推薦"},{"value": .1,"color": "#ccc","title": "公開課"}];var tempAngle = -90;var x0 = 600, y0 = 300;var raduis = 200;for(var i = 0; i < data.length; i++) {mcontext.beginPath();mcontext.moveTo(x0, y0);var angle = data[i].value * 360;var startAngle = tempAngle*Math.PI/180;var endAngle = (tempAngle+angle)*Math.PI/180;mcontext.fillStyle = data[i].color;mcontext.arc(x0, y0, raduis, startAngle, endAngle);mcontext.closePath();mcontext.fill();tempAngle += angle;}</script>

三角函數(shù)的補充：

Math.sin(弧度); //夾角對面的邊 和 斜邊的比值

Math.cos(弧度); //夾角側(cè)邊與斜邊的比值

圓形上面的點的坐標(biāo)的計算公式

x =x0 + Math.cos(rad) * R;//x0和y0是圓心點坐標(biāo)

y =y0 + Math.sin(rad) * R;//注意都是弧度?

1.7?繪制文字

canvas?提供了兩種方法來渲染文本:

?

fillText(text, x, y [, maxWidth])

?

在指定的(x,y)位置填充指定的文本，繪制的最大寬度是可選的.

?

strokeText(text, x, y [, maxWidth])

?

在指定的(x,y)位置繪制文本邊框，繪制的最大寬度是可選的.

?

示例1

?

文本用當(dāng)前的填充方式被填充：

var ctx = document.getElementById('canvas').getContext('2d');ctx.font = "48px serif";ctx.fillText("Hello world", 10, 50);

示例2

文本用當(dāng)前的邊框樣式被繪制：

var ctx = document.getElementById('canvas').getContext('2d');ctx.font = "48px serif";ctx.strokeText("Hello world", 10, 50);

文本樣式

font = value:?當(dāng)前我們用來繪制文本的樣式.?這個字符串使用和?CSS font?屬性相同的語法.?默認(rèn)的字體是?10px sans-serif。

textAlign = value:?文本對齊選項.?可選的值包括：start, end, left, right or center.?默認(rèn)值是?start。

?

textBaseline = value: ?基線對齊選項.?可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認(rèn)值是?alphabetic。

?

代碼示例：

<canvas id="mcanvas">你的瀏覽器不支持canvas，請升級瀏覽器</canvas><script>var mcanvas = document.getElementById("mcanvas"); //獲得畫布var mcontext = mcanvas.getContext("2d"); //獲得上下文mcanvas.width = 900; mcanvas.height = 600; mcontext.fillStyle = "#0000ff";mcontext.font = "italic 30px 微軟雅黑";mcontext.textAlign = "start";mcontext.textBaseline = "top";mcontext.fillText("你好", 200, 0, 100);mcontext.font = "italic 30px 微軟雅黑";mcontext.textAlign = "left";mcontext.textBaseline = "top";mcontext.fillText("你好", 200, 50, 100);mcontext.font = "bold 30px 黑體";mcontext.textAlign = "center";mcontext.textBaseline = "top";mcontext.strokeText("你好", 200, 100, 100);mcontext.font = "bold 30px 黑體";mcontext.textAlign = "right";mcontext.textBaseline = "top";mcontext.strokeText("你好", 200, 150, 100);mcontext.font = "bold 30px 黑體";mcontext.textAlign = "end";mcontext.textBaseline = "top";mcontext.strokeText("你好", 200, 200, 100);</script>

1.8繪制圖像

1.基本繪制圖片的方式

?

context.drawImage(img,x,y);

?

參數(shù)說明：?x,y?繪制圖片左上角的坐標(biāo)，?img是繪制圖片的dom對象。

2.在畫布上繪制圖像，并規(guī)定圖像的寬度和高度

context.drawImage(img,x,y,width,height);

參數(shù)說明：width?繪制圖片的寬度， ?height：繪制圖片的高度

如果指定寬高，最好成比例，不然圖片會被拉伸

設(shè)置高 = 原高度 * 設(shè)置寬/ 原寬度;

3.圖片裁剪，并在畫布上定位被裁剪的部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

參數(shù)說明：

????sx,sy?裁剪的左上角坐標(biāo)，

????swidth：裁剪圖片的高度。?sheight:裁剪的高度

其他同上

4.用javascript創(chuàng)建img對象

?

上面提供的3個方法，都需要一個Image對象作為參數(shù)，下面介紹了幾種創(chuàng)建Image對象的方式。需要注意的是，為Image的src屬性賦值后，Image對象會去裝載指定圖片，但這種裝載是異步的，如果圖片太大或則圖片來自網(wǎng)絡(luò)，且網(wǎng)絡(luò)傳輸速度慢，Image對象裝載圖片就會需要：一定的時間開銷。為了保證圖片裝載完成后才去繪制圖片，可以監(jiān)聽Image對象的onload回調(diào)事件，然后在事件處理函數(shù)中繪制圖片，如下所示：

?

第一種方式：

var img = document.getElementById("imgId");img.onload = function(){ //圖片加載完成后，執(zhí)行此方法mcontext.drawImage(img, 10, 10);}

第二種方式：

var img = document.createElement("img");img.src = "img/a.jpg";img.alt = "誰笑誰是小狗";img.onload = function(){ //圖片加載完成后，執(zhí)行此方法mcontext.drawImage(img, 10, 10);}

第三種方式：

var img = new Image();//這個就是 img標(biāo)簽的dom對象img.src = "imgs/arc.gif";img.alt = "誰笑誰是小狗";img.onload = function() { //圖片加載完成后，執(zhí)行此方法}

?

轉(zhuǎn)載于:https://www.cnblogs.com/reeber/p/11266982.html

總結(jié)

以上是生活随笔為你收集整理的H5 canvas 绘图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。