Canvas畫布

時間 2019-12-12

標籤 canvas 畫布简体版

原文原文鏈接

canvascss

使用 <canvas> 元素不是很是難但你須要一些基本的HTML和JavaScript知識。<canvas> 元素不被一些老的瀏覽器所支持，可是全部的主流瀏覽器的新近版本都支持。Canvas 的默認大小爲300像素×150像素（寬×高，像素的單位是px）。可是，可使用HTML的高度和寬度屬性來自定義Canvas 的尺寸。爲了在 Canvas 上繪製圖形，咱們使用一個JavaScript上下文對象，它能動態建立圖像（ creates graphics on the fly）。

canvas的默認寬高爲：300x150
canvas在設置寬高時不可以使用css來設置寬高，若是使用css來設置寬高，那麼圖像會縮放，不會變大
若是瀏覽器不支持canvas，會顯示canvas標籤之間的內容
獲得上下文對象時，通常咱們傳入的是「2d」,2d指的是能夠繪製平面圖形，若是在繪製3d圖形，傳入「webgl」
經過getContext方法獲得一個CanvasRenderingContext2D對象，這個對象就是操做canvas的一個上下文對象（工具集）。
若是給canvas在js代碼中從新設置寬高，未來canvas中的內容會被清空

canvas的API:

方法：

getContext("2d"):獲得上下文對象
moveTo()：將畫筆移動到某一點
lineTo()：肯定要鏈接的另外一點
stroke()：將以上全部的路徑鏈接起來

fill()：將以上全部的路徑組成的圖形填充起來

<canvas id="cas"> 若是瀏覽器不支持canvas，會顯示這段內容 </canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //1.1給畫布設置寬高：
 cas.width = 600; cas.height = 300; //2.0獲得繪製上下文對象
        var ctx = cas.getContext("2d"); //3.0將點移動到100，100位置
 ctx.moveTo(100,100);//將畫筆移動到100，100的位置
        //4.0將線的終點也標記出來
 ctx.lineTo(200,100);//標記另外一點200，100而且記錄，未來以上兩點要用線鏈接起來
        //5.0將全部的描點連接起來
 ctx.stroke(); </script>

　　非零環繞原則：web

closePath：將全部的路徑閉合起來
setLineDash():用來設置虛線（它裏面要傳入一個參數，參數的類型是數組）\

getLineDash():獲得傳入的虛線數組

<canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 600; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); ctx.moveTo(100,100); ctx.lineTo(500,100); ctx.lineTo(500,500); ctx.lineTo(100,500); ctx.closePath(); ctx.moveTo(250,250); ctx.lineTo(250,350); ctx.lineTo(350,350); ctx.lineTo(350,250); ctx.closePath(); ctx.stroke(); ctx.fill(); </script>

屬性：

lineWidth：設置路徑的寬度
lineDashOffset：設置虛線的偏移距離
strokeStyle：設置線段描邊的顏色

fillStyle: 設置路徑所圍區域的顏色

<canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 300; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); ctx.moveTo(250,100); ctx.lineTo(350,100); ctx.lineTo(350,200); ctx.lineTo(250,200); ctx.closePath(); ctx.lineWidth = 20; // ctx.strokeStyle = "red";
        // ctx.strokeStyle = "#0f0";
 ctx.strokeStyle = "rgb(0,0,255)"; ctx.fillStyle = "pink"; ctx.stroke(); ctx.fill(); </script>

繪製一個折線圖

<canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 600; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0繪製座標系
        var paddingTop; var paddingBottom; var paddingRight; var paddingLeft; var arrW = 10; var arrH = 26; paddingTop = paddingBottom = paddingRight = paddingLeft = 30; var x0 = paddingLeft; var y0 = cas.height - paddingBottom; //4.1繪製軸線
 ctx.beginPath(); ctx.moveTo(x0,paddingTop); ctx.lineTo(x0,y0); ctx.lineTo(cas.width - paddingRight,y0); ctx.stroke(); //4.2繪製箭頭
 ctx.beginPath(); ctx.moveTo(x0,paddingTop); ctx.lineTo(x0 - arrW / 2 , paddingTop + arrH); ctx.lineTo(x0 , paddingTop + arrH / 2); ctx.lineTo(x0 + arrW / 2 , paddingTop + arrH); ctx.closePath(); ctx.moveTo(cas.width - paddingRight,y0); ctx.lineTo(cas.width - paddingRight - arrH , y0 - arrW / 2); ctx.lineTo(cas.width - paddingRight - arrH / 2 , y0); ctx.lineTo(cas.width - paddingRight - arrH , y0 + arrW / 2); ctx.closePath(); ctx.fill(); //4.3繪製座標上的小點：
        var l = 8; var points = [[10,10],[15,30],[30,5],[50,8],[55,40]];//二維數組。
        for(var i =  0 ; i < points.length ; i ++ ) { //取出對應點的x，y
            var pX = points[i][0]; var pY = points[i][1]; //將圓點由本身的圓點切換成畫布的左上角
 pX = x0 + points[i][0]; pY = y0 - points[i][1]; //根據x,y繪製小點(繪製一個矩形)
 ctx.beginPath(); ctx.lineWidth = 4; ctx.moveTo(pX - l / 2,pY - l / 2); ctx.lineTo(pX + l / 2,pY - l / 2); ctx.lineTo(pX + l / 2,pY + l / 2); ctx.lineTo(pX - l / 2,pY + l / 2); ctx.closePath(); ctx.stroke(); } </script>

繪製矩形：

canvasRenderingContext2D.rect(x,y,width,height);//繪製矩形

x,y起點的座標

width,height矩形對應的寬高

這個方法只會設置矩形的路徑，不會進行填充或者是描邊(不建議使用這個方法由於它若是要填充或者是描邊，還須要藉助:fill(),stroke();

canvasRenderingContext2D.strokeRect(x,y,width,height);:

做用：描邊一個矩形

canvasRenderingContext2D.fillRect(x,y,width,height);

做用：填充一個矩形

canvasRenderingContext2D.clearRect(x,y,width,height);

做用：清除一個矩形區域

<canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 600; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0直接使用canvas中的方法來繪製矩形：（100，100），200，100
 ctx.rect(100,100,200,100); // ctx.stroke();
 ctx.fill(); ctx.strokeRect(100,250,200,100); ctx.fillRect(100,400,200,100); //清除一個矩形區域：
 ctx.clearRect(120,120,50,50); ctx.clearRect(200,150,80,300); ctx.clearRect(0,0,cas.width,cas.height); // cas.width = width;
        // cas.height = height;
    </script>

　　3.繪製圓弧：

canvasRenderingContext2D.arc(x,y,radius,beginAngle,endAngle,anticlockwise);

做用：繪製一段圓弧

參數：

x,y繪製圓弧的起始座標

radius:圓弧的半徑

beginAngle:開始的弧度(不是角度)

endAngle:結束的弧度（不是角度）

anticlockwise：判斷是不是逆時針(這個參數是可選參數，默認值爲false，說明繪製方法是順時針繪製，若是設置爲true,那麼繪製方法改成逆時針)

注意：

1）arc須要配合fill或者是stroke方法來進行繪製

2）arc方法的0度角是水平向右

3）arc方法要配合moveTo方法來使用

<canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 600; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0繪製一個圓
 ctx.arc(300, 300, 100, 0, 2 * Math.PI); ctx.stroke(); </script>

<canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 600; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0使用arc方法來繪製一個圓形
        // ctx.arc(300,300,100,0,2*Math.PI);
        // ctx.stroke();
        //角度轉弧度：
        function toRadian( angle) { return angle * Math.PI / 180; } //弧度轉角度：
        function toAngle (radian) { return radian * 180 / Math.PI; } //4.1繪製一個圓弧
 ctx.moveTo(300,300); ctx.arc(300,300,100,0, toRadian(90)); ctx.closePath(); ctx.stroke(); </script>

canvasRenderingContext2D.arcTo(x,y,x1,y1,radius):

做用：繪製一段與線段相切的圓弧

參數：

x,y起點座標

x1,y1終點座標

radius:半徑

<canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 300; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0繪製一段與線段相切的圓弧
        var r = 50; ctx.moveTo(20,20); ctx.arcTo(170,20,170,70,r); ctx.lineTo(170,170); ctx.stroke(); </script>

　　圓角矩形canvas

<canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 300; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0繪製四條不相交的線段
 ctx.moveTo(100,100); ctx.lineTo(300,100); ctx.arcTo(90,100,90,110,10); ctx.moveTo(310,110); ctx.lineTo(310,210); // ctx.arcTo(310,100,310,110,10);
 ctx.arcTo(310,100,300,100,10); ctx.moveTo(300,220); ctx.lineTo(100,220); ctx.arcTo(310,220,310,210,10); ctx.moveTo(90,210); ctx.lineTo(90,110); ctx.arcTo(90,220,100,220,10); ctx.stroke(); </script>

　　4.繪製文本數組

canvasRenderingContext2D.strokeText(text, x, y);

做用:在頁面上繪製一段文本（將文本進行描邊）

參數：

text:繪製的文本

x,y文本繪製的位置

注意：

1）默認狀況下繪製出來的文本會靠近點的右上方顯示

2）strokeText是空心的，fillText是實心的

<canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 300; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0在canvas中繪製Hello Wrold
        var str = "Hello World"; var x = 100; var y = 100; ctx.font = "30px '楷體'"; ctx.strokeText(str,x,y); ctx.arc(x,y,2,0,2*Math.PI); ctx.stroke(); ctx.beginPath(); ctx.fillText(str,x,y + 100); ctx.arc(x,y + 100,2,0,2*Math.PI); ctx.stroke(); </script>

canvasRenderingContext2D.fillText(text, x, y);瀏覽器

做用：在頁面上繪製一段文本（將文本進行填充）

CanvasRenderingContext2D.textAlign:

做用：設置文本水平方向上的位置

取值：

left:默認

right:靠右顯示

center:居中顯示

CanvasRenderingContext2D.textBaseline

做用：設置文本垂直方向上的位置

取值：

baseLine:

middle:

bottom:

top:

CanvasRenderingContext2D.measureText()：

做用：獲得一個對象，這個對象能夠幫助咱們獲得文本的寬度。

<canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 600; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0在canvas中繪製Hello Wrold
        var str = "Hello World"; var x = 300; var y = 100; ctx.font = "18px '楷體'"; //設置文本水平方向上的位置：textAlign
        // ctx.strokeText(str,x,y);
        // ctx.moveTo(x,0);
        // ctx.lineTo(x,300);
        // ctx.stroke();
        // ctx.beginPath();
        // ctx.textAlign = "right";
        // ctx.strokeText(str,x,y+50);
        // ctx.beginPath();
        // ctx.textAlign = "center";
        // ctx.strokeText(str,x,y+100);
        //設置文本垂直方向上的位置：textBaseline
        // ctx.beginPath();
        // ctx.moveTo(0,300);
        // ctx.lineTo(600,300);
        // ctx.stroke();
        // ctx.fillText(str, 0 ,300);
        // //top, middle, bottom
        // ctx.beginPath();
        // ctx.textBaseline = "top";
        // ctx.fillText(str, 150,300)
        // ctx.beginPath();
        // ctx.textBaseline = "middle";
        // ctx.fillText(str, 300,300)
 ctx.beginPath(); ctx.textBaseline = "bottom"; ctx.fillText(str, 450,300) //獲得文本的寬度：
        var size = ctx.measureText(str); alert(size.width) </script>

　　5. 繪製圖形
　　若是要繪製圖片，必須先獲得一張圖片，獲得圖片的方式有兩種：
　　第一種：直接從dom元素中取
　　第二種：使用new關鍵字new出來
　　　　CanvasRenderingContext2D.drawImage( img, dx, dy )dom

做用：在canvas中繪製一張圖片工具

　　參數：
　　　　img：要繪製的圖片對象
　　　　dx，dy：圖片在canvas中的繪製位置
　　　　CanvasRenderingContext2D.drawImage( img, dx, dy , dWidth, dHeight )webgl

<canvas id="cas"></canvas>
    <!-- <img src="imgs/1.jpg" alt="" id="img"> -->
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 600; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0繪製一張圖片
        //4.1獲得圖片對象的第一種方式
        // var img = document.getElementById("img");
        // //若是要繪製這張圖片必須保證圖片已經被正常加載出來了
        // img.onload = function(){
        // //4.2使用drawImage方法繪製圖片
        // ctx.drawImage(img, 100, 100);
        // }
        //4.2獲得圖片對象的第二種方式
        var img = new Image();//建立一個圖片對象
 img.src = "imgs/1.jpg";//給對象添加一個路徑屬性，未來這張圖片就是這個路徑下面的圖片
 img.onload = function(){ ctx.drawImage(img,200,200); } </script>

　　做用：在canvas中繪製一張圖片
　　參數：
　　　　img：要繪製的圖片對象
　　　　dx，dy：圖片在canvas中的繪製位置
　　　　dWidth, dHeight:給繪製圖片設置寬高
　　　　CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy , dWidth, dHeight )
　　this

canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 600; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0獲得圖片對象
        var img = new Image(); img.src = "imgs/2.jpg"; img.onload = function(){ ctx.drawImage(img,0,0,600, 600 * this.height / this.width); } </script>

做用：在canvas中繪製一張圖片
　　參數：
　　　　img：要繪製的圖片對象
　　　　sx,sy：從要繪製圖片中裁剪的圖片起始座標
　　　　sWidth,sHeight:從要繪製的圖片中裁剪的圖片寬高
　　　　dx，dy：圖片在canvas中的繪製位置
　　　　dWidth, dHeight:給繪製圖片設置寬高spa

<canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 600; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0獲得一個圖片對象
        var img = new Image(); img.src = "imgs/2.jpg"; img.onload = function(){ // ctx.drawImage( img, 719, 264, 43, 75, 100, 100, 200, 200 * 75 / 43);
 ctx.drawImage(img, 719 , 264, 43, 75, 100, 100, 43, 75); } </script>

　　6. 變換
　　在canvas中若是要繪製圖形，座標系起着相當重要的做用。在canvas中爲了可以繪製出更多圖形來，canvas爲咱們準備一系列的變換方法。
　　做用：可使用變換幫助我繪製更多類型的圖形。

　　translate(); 平移變換
　　scale(); 伸縮變換
　　rotate(); 旋轉變換
　　變換之後的座標系會影響後面結構

<canvas id="cas"></canvas>
    <script>
        //角度轉弧度：
        function toRadian(angle) { return angle * Math.PI / 180; } //弧度轉角度
        function toAngle (radian) { return radian * 180 / Math.PI; } //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 300; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //4.0在canvas中心繪製一個矩形
        //4.1將座標平移到畫布中心位置
 ctx.translate( cas.width / 2, cas.height / 2); //4.2繪製矩形
        var l = 100; var x = -l / 2; var y = -l / 2; var angle = 2; var speed = 1000; setInterval(function() { //先清除畫布內容
 ctx.clearRect( -cas.width / 2, -cas.height / 2, cas.width, cas.height); //旋轉
 ctx.rotate(toRadian(angle)); //繪製矩形
 ctx.strokeRect( x, y, l, l); // angle ++;
 }, 1000 / speed); </script>

　　7. 狀態的保存和恢復

　　在canvas中全部的狀態屬性都會一直保存下去，影響下面代碼的樣式，因此爲了解決這個問題，咱們能夠進行狀態的保存的恢復。

　　save(); //將以前的狀態保存起來
　　restore(); //將上一次保存的狀態恢復過來

    <canvas id="cas"></canvas>
    <script>
        //1.0獲得canvas對象
        var cas = document.getElementById("cas"); //2.0設置寬高
 cas.width = 600; cas.height = 300; //3.0獲得上下文對象
        var ctx = cas.getContext("2d"); //當代碼運行到這裏的時候，咱們的canvas中屬性的狀態，所有是默認的
        //我但願在這裏把全部的默認狀態所有保存起來
 ctx.save(); //4.0繪製一個矩形（描邊紅色，填充綠色，線寬10）
 ctx.beginPath(); ctx.fillStyle = "red"; ctx.strokeStyle = "blue"; ctx.lineWidth = 10; ctx.rect(100,100,100,100); ctx.stroke(); ctx.fill(); //當代碼運行到這裏的時候，咱們的canvas中屬性的狀態被修改了
        //咱們但願在這裏把之保存的狀態恢復過來
 ctx.restore(); //5.0繪製第二個矩形（全部樣式我都但願是默認的）
 ctx.beginPath(); ctx.rect(300,100,100,100); ctx.stroke(); ctx.fill(); </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。