canvas學習之API整理筆記（一）

時間  2019-12-01
標籤 canvas 學習 api 整理 筆記 简体版
原文   原文鏈接

心心念唸的Canvas系列文章通過長時間的整理和沉澱，終於決定動筆啦！我會從最簡單的API開始，逐步深刻，再結合酷炫的實例，爲你們帶來這一系列的文章，但願你們多提建議，多多鼓勵！^_^激動ing...css

好，下面正文開始：html

其實canvas自己很簡單，就是去學習它的API，多看實例，多本身動手練習，多總結。可是canvas的API實在是有點多，對於初學者來講，可能學到一半就止步不前了。我也有這種感受，在學習的過程當中，編寫實例，用到了其中不少的屬性和方法，可是回頭來看的時候總以爲什麼也沒用。因此決定系統性的記錄一下它經常使用到的API，方便之後查閱，也順便造福一下你們。前端

另外：
附一個以前學習的時候本身跟着教程寫的一個小遊戲：tinyHeart小遊戲
再附上關於這次canvas系列文章的實例代碼github地址：About-Canvasgit

開始以前

假設html代碼中有一個canvas標籤：程序員

<canvas id="canvas">你的瀏覽器不支持canvas！</canvas>複製代碼

若是你的瀏覽器是IE8及如下，那麼很遺憾，上面那段文字會被渲染出來！並且下面的方法也都不能使用了；因此請使用支持canvas的瀏覽器來使用後面的方法。github

//獲取canvas容器
var can = document.getElementById(‘canvas’);
//建立一個畫布
var ctx = can.getContext('2d');複製代碼

另外咱們能夠還能夠獲得容器的寬和高度canvas

var canWid = can.width;   //canvas 的寬度
var canHei = can.height;   //canvas 的高度複製代碼

canvas只是一個容器，自己沒有繪製的能力，因此咱們要獲得一個畫布ctx，使之具備繪製各類圖形的能力。下文全部的方法都是ctx的方法。數組

繪製

繪製一個矩形：瀏覽器

//填充矩形（x, y是橫縱座標，原點在canvas的左上角）
ctx.fillRect(x, y, width, height);
//邊框矩形，默認1px 黑色。 
ctx.strokeRect(x, y, width, height);
//清除指定的矩形區域，變爲透明
ctx.clearRect(x, y, width, height);       //繪製動態效果時，經常使用來清除整個畫布複製代碼

繪製路徑:微信

//新建路徑，beginPath是繪製新圖形的開始
ctx.beginPath()
//路徑（線）的起點，通常在上面這條命令後執行
ctx.moveTo(x, y)  
//線的終點 
ctx.lineTo(x, y)   
//繪製圓形
ctx.arc(x, y, r, start, end, true/false)   //x, y圓心，r半徑，start和end是開始和結束角度，false表示順時針（默認），true表示逆時針。
//繪製弧線
ctx.arcTo(x1, y1, x2, y2, r);    //當前端點、(x1,y1)和(x2,y2)這三個點連成的弧線，r是半徑。
//閉合路徑，不是必須的，若是線的終點跟起點同樣，會自動閉合。
ctx.closePath()
//經過線條繪製輪廓（邊框）
ctx.stroke()   
//經過路徑填充區域（實心） 
ctx.fill()複製代碼

說明：

1.fill()和stroke()函數表示繪圖結束。若是要繼續繪製，須要從新新建路徑（beginPath()）。

2.若是lineTo()最後的路徑沒有封閉，fill()函數會自動封閉路徑，而stroke()函數不會。

例：繪製一個三角形

ctx.beginPath();
ctx.moveTo(75, 50);    //路徑起點
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();   //自動將路徑閉合，並默認填充黑色。複製代碼

樣式

  • 顏色

    ctx.fillStyle = 'red'   //針對fill()有效的顏色，還能夠取值：'#fff'、'rgba(0, 0, 0, 0.5)'等。
ctx.strokeStyle = 'red'   //針對stroke()有效的顏色，取值同上。
ctx.globalAlpha = 0.5;   //透明度複製代碼

  • 線段端點

    ctx.lineWidth = 2;   //線條寬度
ctx.lineCap = 'butt(默認)'、'round(圓弧)'、'square(方形)'  //線段端點顯示的樣式複製代碼
    var ctx = document.getElementById('canvas').getContext('2d');
var lineCap = ['butt','round','square'];
ctx.strokeStyle = 'black';
for (var i=0;i<lineCap.length;i++){
    ctx.lineWidth = 15;
    ctx.lineCap = lineCap[i];
    ctx.beginPath();
    ctx.moveTo(25+i*50,10);
    ctx.lineTo(25+i*50,140);
    ctx.stroke();
}複製代碼

    效果以下圖：

  • 線段鏈接處

    ctx.lineJoin = 'miter(默認)'、round(圓角)、`bevel(橫線)`   //兩線段鏈接處所顯示的樣子複製代碼
    var ctx = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round','bevel','miter'];
ctx.lineWidth = 10;
for (var i=0;i<lineJoin.length;i++){
    ctx.lineJoin = lineJoin[i];
    ctx.beginPath();
    ctx.moveTo(10,50+i*40);
    ctx.lineTo(50,10+i*40);
    ctx.lineTo(90,50+i*40);
    ctx.lineTo(130,10+i*40);
    ctx.lineTo(170,50+i*40);
    ctx.stroke();
}複製代碼

    效果以下圖：

  • 虛線

    ctx.setLineDash([4, 2])   //設置虛線，參數爲數組，第一個值爲實現寬度，第二個值爲空白的寬度
ctx.lineDashOffset = 0;   //虛線起始偏移量複製代碼
    var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var offset = 0;
function draw() { 
    offset++;      
    if (offset > 16) {            
        offset = 0;      
    }
    ctx.clearRect(0,0, can.width, can.height);  
    ctx.setLineDash([6, 2]);  
    ctx.lineDashOffset = -offset;  
    ctx.strokeRect(10,10, 100, 100);
}
setInterval(draw, 20);複製代碼

    效果以下圖：

  • 漸變

    var bg = ctx.createLinearGradient(x1, y1, x2, y2);  //定義線性漸變，漸變的起點 (x1,y1) 與終點 (x2,y2)。
var bg1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 100);   //定義徑向漸變
bg.addColorStop(0, 'red');  //定義好，以後開始上色
bg.addColorStop(0.5, 'blue');
bg.addColorStop(1, 'rgba(0, 0, 0, 0.6)');複製代碼
    var bg = ctx.createLinearGradient(0, 0, 0, 200);     //線性漸變
bg.addColorStop(0, 'black');
bg.addColorStop(0.6, '#fff');
ctx.fillStyle = bg;
ctx.fillRect(10, 10, 100, 100);複製代碼

    效果以下圖：

var bg1 = ctx.createRadialGradient(100, 100, 0, 100, 100, 50);    //徑向漸變
  bg1.addColorStop(0, '#FF5F98');
  bg1.addColorStop(0.75, '#FF0188');
  bg1.addColorStop(1, 'rgba(255,1,136,0)');
  ctx.fillStyle = bg1;
  ctx.fillRect(0,0,150,150);複製代碼

效果以下圖：

文字

var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowOffsetX = 2;     //X軸陰影距離，負值表示往上，正值表示往下
ctx.shadowOffsetY = 2;     //Y軸陰影距離，負值表示往左，正值表示往右
ctx.shadowBlur = 2;     //陰影的模糊程度
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";    //陰影顏色
ctx.font = "30px Times New Roman";    //設置字體和字體大小
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 15, 30);    //實體文字
ctx.strokeStyle = 'red';
ctx.strokeText('Hello world', 15, 100);    //邊框文字複製代碼

效果以下圖：

文字的屬性出了上面的列出的之外，還有如下一些屬性：

ctx.font = '20px Times New Roman';
ctx.textAlign = 'center';    //start, end, left, right or center
ctx.textBaseline = 'middle'  //top, hanging, middle, alphabetic, ideographic, bottom
ctx.direction = 'inherit'   //ltr, rtl, inherit複製代碼

圖像

var img = new Image();
img.src= './images/background.jpg';
ctx.drawImage(img, 0, 0);   //img爲圖像，(0, 0)爲起始座標複製代碼

這裏的img能夠是一個img對象，也能夠是一個img元素。

<img id="img" src="./images/background.jpg" style="display:none;">
ctx.drawImage(document.getElementById('img'), 0, 0);複製代碼

另外，繪製圖片的時候還能夠對圖片進行縮放，相似於css中的background-size：

ctx.drawImage(img, 0, 0, w, h);   //w、h指定圖片的寬高，則會同比例縮放。複製代碼

變形

慢慢的從這裏開始，就要開始涉及到複雜的繪製了。而開始複雜的繪製以前，咱們得先了解一個概念：canvas繪圖的狀態。

  • 狀態

    canvas 的狀態就是當前畫面應用的全部樣式和變形的一個快照。另外，用來操做這個狀態的有兩個方法：save()和restore()。save()用來保存當前狀態，restore()用來恢復剛纔保存的狀態。他們均可以屢次調用。

ctx.fillStyle = 'black';
  ctx.fillRect(20, 20, 150, 150);
  ctx.save();  //保存當前狀態
  ctx.fillStyle= '#fff';
  ctx.fillRect(45, 45, 100, 100);
  ctx.restore();    //恢復到剛纔保存的狀態
  ctx.fillRect(70, 70, 50, 50);複製代碼

效果以下圖：

  • 位移(translate)

    ctx.translate(x, y);   //更改canvas的原點複製代碼
    var ctx = document.getElementById('canvas').getContext('2d');
for(var i = 1; i< 4; i++) {
    ctx.save();   //使用save方法保存狀態，讓每次位移時都針對（0，0）移動。
  ctx.translate(100*i, 0);
  ctx.fillRect(0, 50, 50, 50);
  ctx.restore();
}複製代碼

    效果以下圖：

  • 旋轉

    ctx.rotate(Math.PI * 2)     //參照原點順時針旋轉360度複製代碼
ctx.translate(75,75);    //把原點移動到(75, 75);
  for (var i=1; i<6; i++){       // 從裏到外一共6圈
    ctx.save();
    ctx.fillStyle = 'rgb('+(50*i)+','+(255-50*i)+',255)';
    for (var j=0; j<i*6; j++){     // 每一圈有i*6個圓點
      ctx.rotate(Math.PI*2/(i*6));
      ctx.beginPath();
      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
      ctx.fill();
    }
    ctx.restore();
  }複製代碼

效果以下圖：

  • 縮放

    ctx.scale(x, y);     //基於原點縮放，x、y是兩個軸的縮放倍數複製代碼
    var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'red';
ctx.scale(0.8, 1.2);
ctx.beginPath();
ctx.arc(75, 75, 60, 0, Math.PI * 2);
ctx.fill();複製代碼

    原本繪製的是一個半徑爲60的圓形，可是通過縮放以後，實際效果以下：

動畫

元素的位置移動，就造成了動畫。

一幀一幀的來渲染這個元素，並且這個元素每一幀的位置都不同，咱們的眼睛看到的就是動畫了。實現起來也很方便，js提供了兩個方法：setTimeout 和setInterval均可以實現，可是一個有逼格的程序員實現動畫是不會用這兩個方法的，而是用requestAnimationFrame這個方法。有什麼區別呢？下面簡單作個比較。

  • setInterval(myFun, 10); 意思是隔一毫秒執行一個myFun函數，可是這樣就有一個問題了，好比我myFun函數裏面繪製的東西比較耗時，而10ms以內尚未徹底繪製出來，可是這段代碼強制1ms以後又開始繪製下一幀了，因此就會出現丟幀的問題；反之，若是時間設置太長，就會出現畫面不流暢、視覺卡頓的問題。

  • requestAnimationFrame(myFun); 若是咱們這樣寫，又是什麼意思呢？意思是根據必定的時間間隔，會自動執行myFun函數來進行繪製。這個」必定的時間間隔」就是根據瀏覽器的性能或者網速快慢來決定了，總之，它會保證你繪製完這一幀，纔會繪製下一幀，保證性能的同時，也保證動畫的流暢。

結語

這些API已經包含了大部分經常使用的了，結合requestAnimationFrame函數已經能夠繪製不少酷炫的效果了。可是光看這些API很簡單，可是想要在繪製遊戲或者動畫中用起來駕輕就熟還須要看大量的實例，本身實踐總結的。

本文就到這裏，感謝各位看官～

本文對你有幫助？歡迎掃碼加入前端學習小組微信羣：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程