canvas · 程序員開發筆記

[TOC] #### 什么是canvas： ? <canvas> 標簽定義圖形，比如圖表和其他圖像。 ? <canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。 ? canvas 其實對于HTML來說很簡單，只是一個標簽元素而已，自己并沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上，擁有繪制路徑，矩形，圓，字符以及圖像等功能。所有的標簽只是圖形的容器，必須使用JavaScript的 API 操作繪圖。標簽： <canvas id=“canvas” width=“500” height=“500”></canvas> getContext ? 返回一個用于在畫布上繪圖的環境 <script type="text/javascript"> var c = document.getElementById("canvas"); var obj = c.getContext('2d'); </script> #### canvas方法或屬性 #### 矩形 ? context.fillRect(x,y,width,height) 繪制“被填充”的矩形 ? context.strokeRect(x,y,width,height) 繪制矩形（無填充） ? context.clearRect(x,y,width,height) 在給定的矩形內清除指定的像素 #### 顏色、樣式 ? context.fillStyle=‘#f00f00’ 設置或返回填充繪畫的顏色、漸變或模式 ? context.strokeStyle=‘green’ 設置或返回筆觸的顏色、漸變或模式 ? context.lineWidth=10 設置或返回當前的線條寬度 ? context.lineJoin=“邊界類型” bevel:斜角,round:圓角,miter:尖角 eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; margin: 0 auto; display: block; } </style> </head> <body>   <canvas id="canvas" width="800" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); //獲得繪畫環境(相當于鋪了一層畫布) var cv = canvas.getContext('2d'); //設置填充顏色 cv.fillStyle = 'yellow'; //繪制一個實心矩形 cv.fillRect(100,100,500,300); //設置描邊線條顏色 cv.strokeStyle = 'pink'; //設置線條粗細 cv.lineWidth = 5; //繪制一個空心矩形 cv.strokeRect(300,200,400,260); //清理會話區域 cv.clearRect(220,170,200,160); </script> </body> </html> #### 路徑 ? beginPath() 開始一條路徑，或重置當前路徑 ? closePath() 創建從當前點回到起始點的路徑(閉合路徑） ? moveTo(x,y) 把路徑移動到畫布中的指定點，不創建線條 ? lineTo(x,y) 添加一個新點，創建從該點到最后指定點的線條 ? fill() 填充當前繪圖（填充路徑） ? stroke() 繪制已定義的路徑（連線路徑） eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; margin: 0 auto; display: block; } </style> </head> <body> <canvas id="canvas" width="800" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); //獲得繪畫環境(相當于鋪了一層畫布) var cv = canvas.getContext('2d'); //開啟路徑 cv.beginPath(); //指定路徑起點 cv.moveTo(30,30); //指定終點 cv.lineTo(160,300); cv.lineTo(290,30); cv.lineTo(420,300); cv.lineTo(550,30); cv.strokeStyle = 'yellow'; cv.lineWidth = 5; //繪制路徑 cv.stroke(); </script> </body> </html> eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; margin: 0 auto; display: block; } </style> </head> <body> <canvas id="canvas" width="800" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); //獲得繪畫環境(相當于鋪了一層畫布) var cv = canvas.getContext('2d'); //開啟路徑 cv.beginPath(); //指定路徑起點 cv.moveTo(30,30); //指定終點 cv.lineTo(160,300); cv.lineTo(290,30); //關閉路徑,會將最后一個點和第一個點用直線連接,從而形成一個封閉的空間 cv.closePath(); //邊界類型 cv.lineJoin = 'round'; cv.strokeStyle = 'yellow'; cv.lineWidth = 5; //繪制路徑 cv.stroke(); cv.fillStyle = 'deepskyblue'; //填充 //cv.fill(); </script> </body> </html> 畫板實例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; margin: 0 auto; display: block; position: relative; } #color{ margin-left: 200px; } </style> </head> <body> <input type="color" id="color" /> <input type="range" id="range" min="1" max="20" value="3" /> <span id="r">3</span> <input type="button" id="e" value="橡皮擦" /> <canvas id="canvas" width="800" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var color = document.getElementById("color"); var range = document.getElementById("range"); //獲得繪畫環境(相當于鋪了一層畫布) var cv = canvas.getContext('2d'); cv.strokeStyle = 'yellow'; cv.lineWidth = 3; canvas.onmousedown = function(e){ var ev = window.event || e; //獲得鼠標位置 var mousex = ev.layerX || ev.offsetX; var mousey = ev.layerY || ev.offsetY; //開啟路徑 cv.beginPath(); //設置起點 cv.moveTo(mousex,mousey); //加鼠標移動事件 canvas.onmousemove = function(e){ var ev = window.event || e; var newx = ev.layerX || ev.offsetX; var newy = ev.layerY || ev.offsetY; cv.lineTo(newx,newy); cv.stroke(); } } //鼠標抬起事件 canvas.onmouseup = function(){ //結束路徑 cv.closePath(); //取消鼠標移動事件 canvas.onmousemove = null; } color.onchange = function(){ //將用戶選擇的顏色設置給畫板 cv.strokeStyle = this.value; } range.onchange = function(){ //將用戶拖動的值設置給線條粗細 cv.lineWidth = this.value; document.getElementById("r").innerHTML = this.value; } //橡皮擦 document.getElementById("e").onclick = function(){ alert('開始盡情擦黑板吧！'); cv.strokeStyle = '#272822'; } </script> </body> </html> #### 畫布控制 ? context.scale(scalewidth,scaleheight) 縮放處理 1=100% ? context.translate(x,y) 圖形位置處理 (平移） ? context.rotate(angle) 旋轉畫布,單位：弧度，默認以畫布為圓心旋轉 eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; margin: 0 auto; display: block; position: relative; } </style> </head> <body> <canvas id="canvas" width="800" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); //獲得繪畫環境(相當于鋪了一層畫布) var cv = canvas.getContext('2d'); //縮放 //cv.scale(1.5,0.5); //平移 //cv.translate(-100,200); //旋轉(單位是弧度) //360角度對應 2π弧度 cv.rotate(30*Math.PI/180); cv.strokeStyle = 'yellow'; cv.lineWidth = 5; cv.beginPath(); cv.moveTo(40,40); cv.lineTo(200,300); cv.lineTo(360,40); cv.closePath(); cv.stroke(); </script> </body> </html> #### 畫圓弧畫圓弧 ? context.arc(x,y,r,sAngle,eAngle,counterclockwise) 創建弧/曲線（用于創建圓形或部分圓）參數說明： x 圓的中心的 x 坐標。 y 圓的中心的 y 坐標。 r 圓的半徑。 sAngle 起始角，以弧度計。（弧的圓形的三點鐘位置是 0度）。 eAngle 結束角，以弧度計。 counterclockwise 可選。False = 順時針，true = 逆時針。弧度計算公式：角度*Math.PI/180 eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; margin: 0 auto; display: block; position: relative; } </style> </head> <body> <canvas id="canvas" width="800" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); //獲得繪畫環境(相當于鋪了一層畫布) var cv = canvas.getContext('2d'); cv.lineWidth = 5; cv.strokeStyle = 'yellow'; //cv.arc(300,200,150,0,90*Math.PI/180); //cv.arc(300,200,150,0,180*Math.PI/180); cv.arc(300,200,150,0,360*Math.PI/180); cv.stroke(); cv.fillStyle = 'greenyellow'; cv.fill(); </script> </body> </html> eg: 餅狀圖 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; margin: 0 auto; display: block; position: relative; } </style> </head> <body> <canvas id="canvas" width="800" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); //獲得繪畫環境(相當于鋪了一層畫布) var cv = canvas.getContext('2d'); cv.lineWidth = 5; cv.strokeStyle = 'yellow'; cv.beginPath(); cv.moveTo(300,200); cv.arc(300,200,150,0,60*Math.PI/180); cv.closePath(); cv.fillStyle = 'pink'; cv.fill(); cv.beginPath(); cv.moveTo(300,200); cv.arc(300,200,150,60*Math.PI/180,110*Math.PI/180); cv.closePath(); cv.fillStyle = 'greenyellow'; cv.fill(); cv.beginPath(); cv.moveTo(300,200); cv.arc(300,200,150,110*Math.PI/180,220*Math.PI/180); cv.closePath(); cv.fillStyle = 'yellow'; cv.fill(); cv.beginPath(); cv.moveTo(300,200); cv.arc(300,200,150,220*Math.PI/180,300*Math.PI/180); cv.closePath(); cv.fillStyle = 'deepskyblue'; cv.fill(); cv.beginPath(); cv.moveTo(300,200); cv.arc(300,200,150,300*Math.PI/180,360*Math.PI/180); cv.closePath(); cv.fillStyle = 'orangered'; cv.fill(); </script> </body> </html> #### 繪制線： <canvas id="canvas" width="300" height="300"></canvas> <script type="text/javascript"> c = document.getElementById("canvas"); obj = c.getContext('2d'); obj.lineWidth = 10; //線顏色 obj.strokeStyle = "red"; //開始繪制路徑 obj.beginPath(); //光標移動到0,0 obj.moveTo(0, 0); //繪制到300,300 obj.lineTo(300, 300); //繪制定義好的路徑 obj.stroke(); </script> #### 繪制矩形 <canvas id="canvas" width="300" height="300"></canvas> <script type="text/javascript"> c = document.getElementById("canvas"); //獲得繪圖對象 obj = c.getContext('2d'); //線寬 obj.lineWidth=2; //顏色 obj.strokeStyle='green'; //繪制開始 obj.beginPath(); //繪制矩形 //參數：x,y,width,height obj.strokeRect(50,50,100,100); //填充顏色 obj.fillStyle="red"; //實心矩形 obj.fillRect(220,220,100,100); </script> #### 文本控制：設置字體屬性 ? context.font="40px Arial” 設置對齊方式 ? context.textAlign=“left | right | center” 在畫布上繪制“被填充的”文本 ? context.fillText(text,x,y,maxWidth); 在畫布上繪制文本（無填充） ? context.strokeText(text,x,y,maxWidth) 設置文字基線 ? context.textBaseline=“top | middle | bottom”; 獲取文本寬度 ? context.measureText(text); eg: <canvas id="canvas" width="800" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); //獲得繪畫環境(相當于鋪了一層畫布) var cv = canvas.getContext('2d'); cv.fillStyle = 'yellow'; cv.textAlign = 'center'; cv.textBaseline = 'bottom'; //設置文字大小和字體 cv.font = '50px 黑體'; cv.fillText('后盾人人人做后盾',300,150,600); cv.lineWidth = 1 cv.strokeStyle = 'white'; cv.moveTo(0,150); cv.lineTo(800,150); cv.stroke(); cv.moveTo(300,0); cv.lineTo(300,500); cv.stroke(); console.log('寬度',cv.measureText('后盾人').width); </script> #### 驗證碼 eg: <canvas id="canvas" width="200" height="50"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); //獲得繪畫環境(相當于鋪了一層畫布) var cv = canvas.getContext('2d'); cv.fillStyle = 'yellow'; cv.font = '30px arial'; var words = 'QWERTYUIOPASDFGHJKLZXCVBNM'; for (var i=0;i<4;i++) { var num = Math.floor(Math.random()*(words.length-1+1-0)+0); //隨機位置 var l = Math.floor(Math.random()*((i*50+20)+1-i*50)+i*50); var t = Math.floor(Math.random()*(45+1-30)+30); var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); cv.fillStyle = 'rgb('+r+','+g+','+b+')'; //隨機角度 var d = Math.floor(Math.random()*(5+1+5)-5); cv.rotate(d*Math.PI/180); cv.fillText(words[num],l,t); } for (var i=0;i<10;i++) { var startx = Math.floor(Math.random()*201); var starty = Math.floor(Math.random()*51); var endx = Math.floor(Math.random()*201); var endy = Math.floor(Math.random()*51); cv.beginPath(); cv.moveTo(startx,starty); cv.lineTo(endx,endy); cv.closePath(); var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var o = Math.floor(Math.random()*101); cv.strokeStyle = 'rgba('+r+','+g+','+b+','+o/100+')'; cv.stroke(); } </script> #### 圖像控制向畫布上繪制圖像、畫布或視頻語法 1: 在畫布上定位圖像： context.drawImage(img,畫布x坐標,畫面y坐標); 語法 2: 在畫布上定位圖像，并規定圖像的寬度和高度 context.drawImage(img,畫布x坐標,畫面y坐標,圖片width,圖片height); 語法 3: 剪切圖像，并在畫布上定位被剪切的部分 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 參數： img 規定要使用的圖像、畫布或視頻。 sx 可選。開始剪切的 x 坐標位置。 sy 可選。開始剪切的 y 坐標位置。 swidth可選。被剪切圖像的寬度。 sheight可選。被剪切圖像的高度。 x 可選。在畫布上放置圖像的 x 坐標位置。 y 可選。在畫布上放置圖像的 y 坐標位置。 width 可選。要使用的圖像的寬度。（伸展或縮小圖像） height可選。要使用的圖像的高度。（伸展或縮小圖像）注意:參數數量不同，x、y的函數不同 eg: <canvas id="canvas" width="800" height="500"></canvas> <img src="qiutian.jpg" id="dog" hidden/> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var dog = document.getElementById("dog"); //也可以手動創建圖像資源 //var newimg = document.createElement('img'); //newimg.src = 'qiutian.jpg'; //獲得繪畫環境(相當于鋪了一層畫布) var cv = canvas.getContext('2d'); //等圖片加載完再去繪制圖像 dog.onload = function(){ //繪制圖像 //cv.drawImage(dog,20,20); //cv.drawImage(dog,20,20,200,50); cv.drawImage(dog,150,50,200,150,30,30,400,250); } </script> #### 自定義填充 context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); 參數值參數描述 image 規定要使用的圖片、畫布或視頻元素。 repeat 默認。該模式在水平和垂直方向重復。 repeat-x 該模式只在水平方向重復。 repeat-y 該模式只在垂直方向重復。 no-repeat 該模式只顯示一次（不重復）。 <!DOCTYPE html> <html> <body> <p>要用到的圖片：</p> <img src="/i/lamp.gif" id="lamp" /> <p>Canvas:</p> <button onclick="draw('repeat')">Repeat</button> <button onclick="draw('repeat-x')">Repeat-x</button> <button onclick="draw('repeat-y')">Repeat-y</button> <button onclick="draw('no-repeat')">No-repeat</button> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script type="text/javascript"> function draw(direction) { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.clearRect(0,0,c.width,c.height); var img=document.getElementById("lamp") var pat=ctx.createPattern(img,direction); ctx.rect(0,0,150,100); ctx.fillStyle=pat; ctx.fill(); } </script> </body> </html> #### getImageData() 和 putImageData() 下面的代碼通過 getImageData() 復制畫布上指定矩形的像素數據，然后通過 putImageData() 將圖像數據放回畫布：定義和用法 putImageData() 方法將圖像數據（從指定的 ImageData 對象）放回畫布上。 JavaScript 語法： context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight); 參數值參數描述 imgData 規定要放回畫布的 ImageData 對象。 x ImageData 對象左上角的 x 坐標，以像素計。 y ImageData 對象左上角的 y 坐標，以像素計。 dirtyX 可選。水平值（x），以像素計，在畫布上放置圖像的位置。 dirtyY 可選。水平值（y），以像素計，在畫布上放置圖像的位置。 dirtyWidth 可選。在畫布上繪制圖像所使用的寬度。 dirtyHeight 可選。在畫布上繪制圖像所使用的高度。 eg: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="green"; ctx.fillRect(10,10,50,50); function copy() { var imgData=ctx.getImageData(10,10,50,50); ctx.putImageData(imgData,10,70); } </script> <button onclick="copy()">復制</button> </body> </html> #### 圖像反色處理 eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas{ background: #272822; margin: 0 auto; display: block; position: relative; } </style> </head> <body> <canvas id="canvas" width="1200" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var cv = canvas.getContext('2d'); var dog = document.createElement('img'); dog.src = 'qiutian.jpg'; dog.onload = function(){ cv.drawImage(dog,20,20); //獲得畫布圖像信息 var alldata = cv.getImageData(20,20,500,333); //data屬性中存儲的就是所有像素點的信息 console.log(alldata.data); //[2,3,4,255,2,3,4,255,2,3,4,255] for (var i=0;i<alldata.data.length;i++) { if (i%4!=3) { alldata.data[i] = 255-alldata.data[i]; } } //寫入畫布信息 cv.putImageData(alldata,600,20); } </script> </body> </html>