1. 程式人生 > >canvas畫布基本知識點總結

canvas畫布基本知識點總結

  • 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>

關於線條的問題

  1. 預設寬度為1px
  2. 預設顏色黑色
  3. 但是顯示是灰色,2px寬度,原因是對其點是線的中心位置,會把線分成兩個0.5px,顯示的會是不飽和增加寬度;
  4. 解決方法:前或後移動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);
  1. img圖片物件、canvas物件、video物件
  2. 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是繪製圖片的大小,繪製的圖片不是裁剪而是前面擷取圖片的縮放

canvas的2d轉換

  • 移動, translate(x,y);移動的是座標軸,不是繪製的內容
  • 縮放,scale(0.5,1),表示橫座標縮放0.5倍,縱座標縮放1倍,縮放的是座標軸,不是繪製的內容
  • 旋轉,rotate(),旋轉中心預設是座標原點;