HTML--Canvas基礎入門

時間 2019-11-09

標籤 html canvas 基礎入門欄目 HTML 简体版

原文原文鏈接

一 HTML5畫布基本介紹

1.HTML5專門爲畫布功能提供的標籤:<canvas>,因此畫布相關的功能都是基於這個標籤來完成的;canvas

1 <canvas id="canvas" width="550" height="300"></canvas>
2 // 直接在canvas中設置width和height屬性和將width和height添加到CSS文件中,有必定的區別:
3 // 1.使用屬性來定義canvas,不只定義canvas對象的寬高,同時也定義了可繪製圖形區的寬高;
4 // 2.而使用CSS的方法只能定義canvas自己的大小,不能定義圖形繪製區;

2.爲了可以調用HTML5的畫布API,咱們須要訪問畫布的相關上下文(Context);字體

1 var canvas = document.getElementById('canvas'),
2     context = canvas.getContext('2d');
3 // 使用context能夠調用更多的方法來繪製;

二使用HTML5畫布繪製直線

1.beginPath():開始繪製準備;網站

2.moveTo():繪製的起始座標(x,y);spa

3.lineTo():繪製的結束座標(x,y);3d

4.stroke():馬上開始繪製直線;code

1 var canvas = document.getElementById('Canvas'),
2     context  = canvas.getContext('2d');
3 context.beginPath();
4 context.moveTo(150, 100);
5 context.lineTo(300, 200);
6 context.stroke();

三設置直線的粗細

1 context.lineWidth = 20;      // 設置直線的寬度爲20px;
2 // 須在調用stroke()方法前設置這個屬性;不然此屬性無效;

四設置繪製直線的顏色

1 context.strokeStyle = '#dd4814';     // 設置直線顏色;
2 // 須在調用stroke()方法前設置這個屬性;不然此屬性無效;

五設置直線兩端的樣式

1.context.lineCap = 'butt'; // 繪製按鈕類型;對象

2.context.lineCap = 'round'; // 繪製圓角類型;blog

3.context.lineCap = 'square'; // 繪製正方形類型;圖片

六繪製弧形

// HTML5畫布使用arc()方法來繪製相關的弧形;get

1 arc(
2     x,                  // 定義圓心x座標;
3     y,                  // 定義圓心y座標;
4     radius,             // 半徑;
5     startAngle,         // 起始角度;
6     endAngle,           // 結束角度;
7     counterClockWise,   // 是不是逆時針方向;
8     )

1 var x = 200, y = 150, radius = 60, startAngle = 0.5*Math.PI, endAngle = 1.5*Math.PI, counterClockWise = false;
2 context.beginPath();
3 context.arc(x, y, radius, startAngle, endAngle, counterClockWise);
4 context.strokeStyle = 'black';
5 context.lineWidth = 15;
6 context.stroke();

七生成二次曲線

// 二次曲線經過控制兩根虛擬的直線來生成對應的圖形;

context.beginPath();
context.moveTo(100, 200);
context.quadraticCurveTo(150, 50, 200, 200);
context.lineWidth = 20;
context.strokeStyle = '#dd4814';
context.stroke();

八生成貝塞爾曲線

// 相對於二次曲線來講,貝塞爾曲線增長了一個控制點來生成更復雜的曲線樣式;

1 context.beginPath();
2 context.moveTo(188, 130);
3 context.bezierCurveTo(140, 10, 388, 10, 388, 170);
4 context.lineWidth = 20;
5 context.strokeStyle = '#dd4814';
6 context.stroke();

九 HTML5路徑

// 使用HTML5的路徑(path),能夠鏈接多個子路經;

// 上一個路徑的結束點即成爲下一個路徑的起始點;

1.lineTo();

2.arcTo();

3.quadraticCruveTo(); // 向下彎曲;

4.bezierCurveTo(); // 先向上彎曲,再向下彎曲;

1 context.beginPath();
2 context.moveTo(100, 20);
3 context.lineTo(200, 160);
4 context.quadraticCurveTo(230, 200, 250, 120);
5 context.bezierCurveTo(290, -40, 300, 200, 400, 150);
6 context.lineTo(500, 90);
7 context.lineWidth = 15;
8 context.strokeStyle = '#dd4814';
9 context.stroke();

十設置直線的鏈接樣式

// 在HTML5畫布中直線的鏈接樣式(linejoin)能夠有不一樣類型;

1.miter:直角鏈接;

2.round:圓角鏈接;

3.bevel:去角鏈接;

1 context.beginPath();
2 context.moveTo(99, 150);
3 context.lineTo(149, 50);
4 context.lineTo(199, 150);
5 context.lineJoin = 'miter';
6 context.stroke();

十一 arcTo生成矩形圓角效果

// HTML5畫布中咱們可使用arcTo方法來生成矩形圓角效果;

 1 var rectWidth = 200;
 2 var rectHeight = 100;
 3 var rectX = 189, rectY = 100;
 4 var cornerRadius = 50;
 5 context.beginPath();
 6 context.moveTo(rectX, rectY);
 7 context.lineTo(rectX + rectWidth - cornerRadius, rectY);
 8 context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
 9 context.lineTo(rectX + rectWidth, rectY + cornerRadius + rectHeight);
10 context.lineWidth = 15;
11 context.stroke();

十二畫布生成閉合的圖形

// 在HTML5畫布中,咱們使用beginPath方法開始路徑設置,同時使用closePath方法來閉合路徑;

 1 context.beginPath();
 2 context.moveTo(170, 80);
 3 context.bezierCurveTo(130, 100, 130, 150, 230, 150);
 4 context.bezierCurveTo(250, 180, 320, 180, 340, 150);
 5 context.bezierCurveTo(420, 150, 420, 120, 390, 100);
 6 context.bezierCurveTo(430, 40, 370, 30, 340, 50);
 7 context.bezierCurveTo(320, 5, 250, 20, 250, 50);
 8 context.bezierCurveTo(200, 5, 150, 20, 170, 80);
 9 context.closePath();
10 context.lineWidth = 15;
11 context.lineJoin = 'round';
12 context.strokeStyle = '#dd4814';
13 context.stroke();

十三使用HTML5畫布生成正方形或者矩形

// rect(x, y, w, h);

// x,y表明矩形的左上角座標;w是指矩形的寬度;h是指矩形的長度;

context.beginPath();
context.rect(100, 50, 200, 200);    // 繪製寬高;
context.fillStyle = '#dd4814';      // 設置填充顏色;
context.fill();                     // 繪製結束;

十四繪製圓形

// 在HTML5畫布中,若是須要生成一個原型,能夠經過調用arc()方法來實現;

// 只須要設置起始角度爲0,終止角度是2*Math.PI;

 1 var centerX = canvas.width/2,
 2     centerY = canvas.height/2,
 3     radius = 80;
 4 context.beginPath();
 5 context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
 6 context.fillStyle = '#dd4814';      // 內填充顏色;
 7 context.fill();                     // 設置內填充;
 8 
 9 context.lineWidth = 12;             // 描邊寬度;
10 context.strokeStyle = 'orange';     // 描邊顏色;
11 context.stroke();                   // 設置描邊;
12 // 若同時使用了fill()和stroke(),務必保證fill()在stroke()以前調用,不然stroke()繪製的線會被fill()遮住一半;

十五 HTML5畫布生成線性漸變效果

1.createLinearGradient(x0, y0, x1, y1);

// x0,y0表明了漸變開始點座標;x1,y1表明告終束點座標;

2.addColorStop(stop, color);

// 設置漸變方向後,可使用addColorStop來設置漸變的顏色;

// stop介於0~1之間的值,表示漸變中開始與結束之間的位置;color表明顏色值;

1 context.rect(0, 0, canvas.width, canvas.height);
2 var gridi = context.createLinearGradient(0, 0, canvas.width, canvas.height);
3 gridi.addColorStop(0, 'orange');
4 gridi.addColorStop(1, '#dd4814');
5 context.fillStyle = gridi;
6 context.fill();

十六 HTML5畫布繪製徑向漸變;

var gridi = context.createRadialGradient(275, 150, 50, 275, 150, 200);

// 起始點X座標, 起始點Y座標, 起始點半徑, 漸變結束點X座標, 漸變結束點Y座標, 結束點半徑;

1 gridi.addColorStop(0, '#dd4814');
2 gridi.addColorStop(1, '#ffff66');
3 context.fillStyle = gridi;
4 context.fillRect(0, 0, 550, 300);

十七 HTML5畫布中添加背景圖案

createPattern(image, repetition);

// image:對應的圖片對象;

// repetition:圖片的重複屬性;默認值是repeat;

 1 var image = new Image();
 2 image.onload = function () {
 3     // 這裏確保圖片加載後再執行HTML5畫布相關的方法;
 4     var pattern = context.createPattern(image, 'repeat');
 5     context.rect(0, 0, 550, 300);
 6     context.fillStyle = pattern;
 7     context.fill();
 8 }
 9 // 設置背景圖案的地址:
10 image.src = 'http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg';

十八 HTML5畫布繪圖

// 使用drawImage()方法來繪製圖形;

1 var image = new Image();
2 image.onload = function(){
3     context.drawImage(image, 100, 50, 200, 125);
4     // 繪製圖片image,第二和第三個參數表示圖片距離canvas左上角的left和top距離;
5     // 第四和第五個參數表示繪製圖片的寬度和高度;
6 }
7 image.src = 'http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg';

十九畫布實現圖片裁剪

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

// sx:相對於圖片自身裁剪的左邊距離;

// sy:相對於圖片自身裁剪的頂端距離;

// sw:裁剪的圖片寬度;

// sh:裁剪的圖片高度;

// dx:圖片裁剪後相對於畫布左端距離;

// dy:圖片裁剪後相對於畫布頂端距離;

// dw:圖片裁剪後設置寬度;

// dy:圖片裁剪後設置高度;

1 var image = new Image();
2 image.onload = function(){
3     context.drawImage(image, 100, 50, 100, 84, 50, 50, 100, 84);
4 };
5 image.src = 'http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg';

二十 HTML畫布添加文字

// 使用fillStyle屬性來設置字體顏色;

context.fillStyle = '#dd4814'; // 注意:在fillText()以前設置fillStyle的值;

// 使用相關屬性,能夠定義文字屬性,

context.font = 'bold 30pt "microsoft yahei"';

// 使用fillText()方法添加相關文字;

context.fillText(text, x, y);

1 context.font = 'bold 30pt "microsoft yahei"';
2 context.fillStyle = '#dd4814';
3 context.fillText('Hello World!', 150, 160);

二十一 HTML畫布添加描邊文字

// 使用strokeText()方法能夠添加描邊文字類型;

// 而且可使用strokeStyle()來設置描邊顏色;

1 context.font = 'bold 30pt "microsoft yahei"';
2 context.fillStyle = '#ff6';
3 context.fillText('Hello World!', 150, 160);
4 context.strokeStyle = '#dd4814';
5 context.lineWidth = 2;
6 context.strokeText('Hello World!', 150, 160);
7 // 若是須要同時使用fillText()和strokeText()方法,務必先調用fillText()方法;

二十二 HTML畫布文字對齊

// 在HTML5畫布中,咱們使用textAlign屬性來定義文字的對齊;

1.center-居中;

2.left-居左;

3.right-居右;

4.start-文字方向從左到右;

5.end-文字方向從右到左;

1 context.font = 'bold 30pt "microsoft yahei"';
2 context.textAlign = 'right';
3 context.fillText('Hello World!', 275, 150);
4 // 基於座標點(275, 150)的右對齊;

二十四 HTML5畫布獲取文字度量

// 在HTML5畫布中,咱們可使用measureText方法來獲取文字的相關度量信息對象;

// 其中包含一個屬性,即文字寬度;基於文字的大小和字體,它能夠提供一個準確的文字寬度;

 1 var x = canvas.width/2,
 2     y = canvas.height/2 - 10;
 3 var text = 'Hello HTML5';
 4 
 5 context.font = 'bold 30pt "microsoft yahei"';
 6 context.textAlign = "center";
 7 context.fillStyle = 'red';
 8 context.fillText(text, x, y);
 9 
10 // 如下代碼獲取上面定義的text的相關metrics信息;
11 var metrics = context.measureText(text);
12 var width = metrics.width;
13 context.font = '15pt Arial';
14 context.textAlign = 'center';
15 context.fillStyle = '#888';
16 context.fillText('- ' + width + 'px -', x, y+45);