canvas畫布基本知識點總結

時間 2021-02-17

標籤 javascript css html java canvas 數組框架 ide 函數工具欄目 JavaScript 简体版

原文原文鏈接

HTML5的canvas元素使用JavaScript畫圖；

<canvas width="600" height="400">  </canvas>

canvas畫圖的基本框架

畫布默認背景顏色爲白色，大小爲300*150；
若要設置畫布大小，不建議在style的樣式設置尺寸,效果至關於將本來300*150的畫布等比例放大縮小，包括裏面畫的圖；
建議在元素自己設置；

<body> <!-- 準備畫布 --> <canvas width="600" height="400"></canvas> <!-- 準備繪製工具 --> <!-- 利用工具繪圖 --> <script> // 獲取元素 var myCanvas=document.querySelector('canvas'); // 獲取上下文,繪製工具箱 var ctx=myCanvas.getContext('2d'); // 移動畫筆 ctx.moveTo(100,100); // 繪製直線（軌跡，繪製路徑） ctx.lineTo(200,100); // 描邊 ctx.stroke(); </script> </body>

關於線條的問題

默認寬度爲1px
默認顏色黑色
可是顯示是灰色，2px寬度，緣由是對其點是線的中心位置，會把線分紅兩個0.5px，顯示的會是不飽和增長寬度；
解決方法：前或後移動0.5px便可；

當要畫多條不一樣樣式的平行線時，存在樣式覆蓋問題，須要開闢新路徑；

<body> <canvas width="600" height="400"></canvas> <script> var myCanvas=document.querySelector("canvas"); var ctx=myCanvas.getContext("2d"); // 畫平行線 // 藍色 10px ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.strokeStyle="blue"; ctx.lineWidth=10; ctx.stroke(); // 紅色 20px ctx.beginPath();//開闢新路徑 ctx.moveTo(100,200); ctx.lineTo(200,200); ctx.strokeStyle="red"; ctx.lineWidth=20; ctx.stroke(); // 綠色 30px ctx.beginPath();//開闢新路徑 ctx.moveTo(100,300); ctx.lineTo(200,300); ctx.strokeStyle="green"; ctx.lineWidth=30; ctx.stroke(); </script> </body>

當繪製圖形，須要填充顏色時，使用fill()函數；默認填充顏色爲黑色；

<body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector("canvas"); var ctx = myCanvas.getContext("2d"); // 繪製一個三角形 ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineTo(200,200); ctx.lineTo(100,100); // 描邊 ctx.stroke(); // 填充 ctx.fill(); </script> </body>

當繪製封閉圖形時，會出現起始點和lineTo的結束點沒法徹底閉合，有缺角
解決方法：使用canvas的自動閉合路徑closePath()；

<canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector("canvas"); var ctx = myCanvas.getContext("2d"); // 繪製一個三角形 ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineTo(200,200); // 起始點和lineTo的結束點沒法徹底閉合，有缺角； // ctx.lineTo(100,100); // 使用canvas自動閉合 ctx.closePath(); ctx.lineWidth=10; // 描邊 ctx.stroke(); </script>

填充規則（非零環繞）

看一塊區域是否被填充，從區域畫一條直線，看和這條直線相交的軌跡；
若是是順時針就+1，逆時針就-1；
計算全部軌跡的和，若是非0就填充，是0就不填充；
如上圖1區域：軌跡和爲1，填充；2區域：軌跡和爲2，填充；3區域：軌跡和爲0，不填充；

畫虛線

<script> var myCanvas = document.querySelector("canvas"); var ctx = myCanvas.getContext("2d"); // 畫線 ctx.moveTo(100.5, 100.5); ctx.lineTo(300, 100.5); ctx.setLineDash([5,10,15]); ctx.stroke(); </script>

畫虛線：經過數組描述虛線的排列方式；
獲取虛線的排列方式，獲取的是不重複的那一段的排列方式；
例如：console.log(ctx.setLineDash());獲取的是5 10 15 5 10 15;
括號裏數字爲[數字長度，空格長度，數字長度，空格長度…]；

畫漸變矩形（例如黑白漸變）

主要利用for循環，逐漸改變線條顏色，矩形經過多個線條拼湊；

<body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector("canvas"); var ctx = myCanvas.getContext("2d"); // 繪製一個矩形 // ctx.moveTo(100, 100); // ctx.lineTo(255,100); // ctx.lineWidth='30'; // // 顏色填充 // ctx.strokeStyle='#fff'; // // 從黑到白 // ctx.stroke(); // 線是由點構成的 ctx.lineWidth = '30'; //起始位置 // ctx.moveTo(100, 100); for (var i = 0; i < 255; i++) { //畫255條1px長的線； //每次開闢一條新路徑，否則會樣式覆蓋 ctx.beginPath(); //起始位置 ctx.moveTo(100 + i - 1, 100); //結束位置 ctx.lineTo(100 + i, 100); ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')'; //描邊 ctx.stroke(); } </script> </body>

網格、座標系、點的繪製

網格即多條線按必定的規則排列組成；
座標系繪製兩條相互垂直的有向線段，箭頭本身計算畫三角形，進行填充便可；
點的繪製
須要注意的是，點的座標要先定下來，用對象存儲
點的繪製就是以點的座標爲中心，繪製一個正方形，進行填充，點的大小能夠控制；

<body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); //繪製點 //點的尺寸 //以座標中心繪製點 //點座標 var coordinate = { x: 146, y: 357 } //點尺寸 var dottedSize = 6; ctx.moveTo(coordinate.x - dottedSize / 2, coordinate.y - dottedSize / 2); ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y - dottedSize / 2); ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y + dottedSize / 2); ctx.lineTo(coordinate.x - dottedSize / 2, coordinate.y + dottedSize / 2); ctx.closePath(); ctx.fill(); </script> </body>

圖形繪製

參數（x，y）爲座標，（w，h）爲寬高；

弧度繪製

什麼是弧度？
一種長度的描述單位，一個圓有2Π個弧度，一個角度等於Π/180弧度

<body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); //繪製圓弧 //1.肯定圓心 //2.肯定圓的半徑 //3.肯定起始位置和結束位置，肯定圓弧長度和位置 //4.肯定繪製方向（通常是默認的順時針）direction var w=ctx.canvas.width; var h=ctx.canvas.height; //在中心位置畫一個半徑150px的圓弧右下角（橫座標，縱座標，半徑，起始角度，結束角度） ctx.arc(w/2,h/2,150,0,Math.PI/2); ctx.stroke(); </script> </body>

繪製扇形時，圓心的肯定要放在畫弧形的前面；

繪製文本

ctx.font='微軟雅黑’設置字體；
strokeText(text,x,y,maxWidth);
fillText(text,x,y,maxWidth);
text即要繪製的文本；
x,y爲文本繪製的座標（文本左下角）；
maxWidth設置文本的最大寬度，可選參數；
ctx.textAlign文本水平對齊方式，相對繪製座標來講；
可取值有 left center right start默認 end
ctx.direction屬性css(rtl ltr)start和end與此相關；
若爲ltr則start和left表現一致；
若爲rtl則start和right表現一致；
ctx.textBaseline設置基線（垂直對齊方式）；
top文本的基線處於文本的正上方，而且有一段距離；
middle文本的基線處於文本的正中間
bottom文本的基線處於文本的正下方，而且有一段距離；
hanging文本的基線處於文本的正上方，而且與文本粘合；
alphabetic默認值，文本的基線處於文本的正下方，而且穿過文字；
ideographic和bottom類似，可是不同；
measureText()獲取文本的寬度obj.width；
注意
文本樣式設置要在文本描邊或者填充以前；
左右對齊方式的對齊基準是文字描繪的起始座標；

圖片繪製

drawImage()
三個參數drawImage( image, x , y);

img圖片對象、canvas對象、video對象
x,y圖像繪製的左上角

五個參數drawImage( image, x , y , w, h);
w，h分別爲圖形的寬高設置，是縮放，不是截取，其他參數意義同上；
九個參數drawImage( image, x , y , w , h, x1, y1 ,w1, h1);
image是圖片對象，x,y是圖片定位的座標（即原圖片上圖片從哪開始截取），w,h是在原圖片上的圖片截取區域大小，x1,y1是繪製在畫布上的座標，w1,h1是繪製圖片的大小，繪製的圖片不是裁剪而是前面截取圖片的縮放