99极品视频9,香蕉国产AV一区二区,九九热视频在线播放

一、繪制文字

【1】font字體屬性

canvas 里的font 屬性和css 的font 屬性是一樣的，它可以設(shè)置文本的粗細(xì)、字號(hào)、字體等

css 設(shè)置字體：p{ font: bold 15px 微軟雅黑; }

canvas 設(shè)置字體：ctx.font = 'bold 15px 微軟雅黑'

【2】textAlign水平對(duì)齊

textAlign 設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式

start：默認(rèn), 文本在指定的位置開始

end：文本在指定的位置結(jié)束

center：文本的中心被放置在指定的位置

left：文本左對(duì)齊

right：文本右對(duì)齊

【3】textBaseline垂直對(duì)齊

textBaseline 設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線

alphabetic：默認(rèn)，文本基線是普通的字母基線

top：文本基線是 em 方框的頂端

hanging：文本基線是懸掛基線

middle：文本基線是 em 方框的正中

ideographic：文本基線是 em 基線

bottom：文本基線是 em 方框的底端

【4】文本繪制方法

填充文字： fillText(text, x, y, maxWidth)

描邊文字： strokeText(text, x, y, maxWidth)

解釋：

text：填充的文字

x y：坐標(biāo)

maxWidth：文字最大寬度，該值小于文字寬度會(huì)自動(dòng)縮小填充文字

【5】獲取文字寬度方法

獲取文字寬度：ctx.measureText(text)

【6】案例

<body>
  <canvas id="canvas"></canvas>
  <script>
    // 創(chuàng)建canvas
    const canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext('2d');

    // 文字屬性
    ctx.font = 'bold 200px Arial';

    // 投影
    ctx.shadowColor = 'rgba(0,0,0,0.6)';
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 4;

    // 實(shí)體文字
    ctx.fillStyle = '#b76251';
    ctx.fillText('canvas', 50, 150);

    // 實(shí)體描邊文字
    ctx.strokeStyle = '#f0d5bc';
    ctx.lineWidth = 9;
    ctx.strokeText('canvas', 50, 150);

    // 虛線描邊
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 1;
    ctx.setLineDash([5, 3]);
    ctx.strokeText('canvas', 50, 150);
  </script>
</body>

二、繪制圖片

【1】繪制圖像的基本方式(繪圖+位移)

語法：ctx.drawImage(img， x，y)

參數(shù)說明：

img：是繪制圖片的dom對(duì)象

x y ：圖片向右和向下位移坐標(biāo)

【2】繪圖+位移+寬高

語法：ctx.drawImage(img，x，y，width，height)

參數(shù)說明：

img：是繪制圖片的dom對(duì)象

x y ：圖片向右和向下位移坐標(biāo)

width：繪制圖片的寬度

height：繪制圖片的高度

【3】繪圖+位移+寬高+裁剪

語法：ctx.drawImage(img，sx，sy，swidth，sheight，x，y，width，height)

參數(shù)說明：

img：是繪制圖片的dom對(duì)象

sx sy：裁剪的左上角坐標(biāo)

swidth：裁剪圖片的高度

sheight：裁剪的高度

x y ：圖片向右和向下位移坐標(biāo)

width：繪制圖片的寬度

height：繪制圖片的高度

【4】JavaScript建立圖像源的方式

// 第一種
var img = document.getElementById('imgId');

// 第二種
let img = new Image(); //這個(gè)就是img標(biāo)簽的dom對(duì)象
img.src = '/images/test.gif';
img.alt = '文本信息';
img.onload = function() {
  //圖片加載完成后，執(zhí)行此方法
};

【5】案例

<body>
  <canvas id="canvas"></canvas>
  <script>
    // 創(chuàng)建畫布
    const canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext('2d');

    // 創(chuàng)建圖像源
    const img = new Image();
    img.src = './images/person.png';
    img.onload = function () {
      const { width, height } = img;

      // 繪圖+移動(dòng) drawImage(img, x, y)
      // ctx.drawImage(img, 0, 0);

      // 繪圖+移動(dòng)+寬高 drawImage(img, x, y, width, height)
      ctx.drawImage(img, 0, 0, width / 5, height / 5); //偏移到x軸為0 y軸為0的位置展示， 圖片寬高=原圖寬高/5

      // 繪圖+裁剪+移動(dòng)+寬高 drawImage(img, sx, sy, swidth, sheight, x, y, width, height)
      ctx.drawImage(
        img,
        0, 0, width / 2, height / 2,  // 從左邊 0,0 開始裁剪， 裁剪原圖寬度的一半，高度的一半
        200, 0, width / 5, height / 5 // 偏移到x軸200y軸0的位置展示， 圖片寬高=原圖寬高/5
      );
    };
  </script>
</body>

三、像素操作

【1】imageData是什么？

ImageData 是圖片的數(shù)據(jù)化，是一個(gè)對(duì)象，它具備以下幾個(gè)屬性：

data：Uint8ClampedArray[r, g, b, a, r, g, b, a, r, g, b, a, r, g, b, a]

width：整數(shù)，ImageData的寬度

heidth：整數(shù)，ImageData的高度

Uint8ClampedArray 翻譯過來是 8位無符號(hào)整型固定數(shù)組，每四個(gè)數(shù)組元素代表了一個(gè)像素點(diǎn)的rgba信息，每個(gè)元素?cái)?shù)值取值范圍是[0，255]。若小于0，則為0，大于255，則為255。若為小數(shù)，則取整，取整的方法是銀行家舍入。

【2】獲取imageData對(duì)象

方法：ctx.getImageData(x, y, width, height)

作用：用來獲取canvas畫布上指定矩形區(qū)域的像素?cái)?shù)據(jù)

解釋：

xy: 矩形的左頂點(diǎn)橫縱坐標(biāo)

width: 矩形的寬度

height: 矩形的高度

【3】imageData可以做什么？

我可以通過不同的算法，對(duì)ImageData 中的像素進(jìn)行不同的處理。比如調(diào)整圖片的色調(diào)，檢測圖像邊緣，實(shí)現(xiàn)藝術(shù)效果，馬賽克，人臉識(shí)別……

【4】案例

遍歷圖片像素，通過灰度算法對(duì)圖片像素做處理使圖片變成灰色調(diào)

<body>
  <canvas id="canvas"></canvas>
  <script>
    // 創(chuàng)建畫布
    const canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext('2d');

    // js創(chuàng)建圖片源
    const img = new Image();
    img.src = 'https://img-blog.csdnimg.cn/20210407160120758.png'
    img.setAttribute('crossOrigin', '');
    img.onload = draw;

    function draw() {
      // 圖像尺寸
      const { width, height } = img;

      // 在canvas 中繪制圖像
      ctx.drawImage(img, 10, 10, 150, 200);

      // 從canvas 中獲取圖像的ImageData
      const imgData = ctx.getImageData(0, 0, width, height);
      const data = imgData.data;

      // 像素遍歷
      for (let i = 0; i < data.length; i += 4) {
        const [r, g, b] = [
          data[i],
          data[i + 1],
          data[i + 2],
        ]

        // 將圖片變灰，灰度算法公式: 0.299*r+0.587*g+0.114*b 
        const lm = 0.299 * r + 0.587 * g + 0.114 * b;
        data[i] = lm;
        data[i + 1] = lm;
        data[i + 2] = lm;
      }

      // 在canvas 中顯示ImageData
      ctx.putImageData(imgData, 0, 0);
    }

  </script>
</body>

四、變換

【1】縮放scale()

作用：scale()方法縮放當(dāng)前繪圖，更大或更小

語法：ctx.scale(scalewidth，scaleheight)

scalewidth : 縮放當(dāng)前繪圖的寬度 (1=100%， 0.5=50%，2=200%，依次類推)

scaleheight : 縮放當(dāng)前繪圖的高度 (1=100%，0.5=50%，2=200%，依次類推)

注意：縮放的是整個(gè)畫布，縮放后，繼續(xù)繪制的圖形會(huì)被放大或縮小

【2】位移translate()

語法：ctx.translate(x, y)

x：添加到水平坐標(biāo)（x）上的值

y：添加到垂直坐標(biāo)（y）上的值

注意：發(fā)生位移后，相當(dāng)于把畫布的 0,0 坐標(biāo) 更換到新的 x,y 的位置，所有繪制的新元素都被影響。位移畫布一般配合縮放和旋轉(zhuǎn)等。

【3】旋轉(zhuǎn)rotate()

作用：方法旋轉(zhuǎn)當(dāng)前的繪圖

語法：context.rotate(angle)

angle：弧度（PI）

注意：參數(shù)是弧度（PI），如需將角度轉(zhuǎn)換為弧度，請(qǐng)使用 degrees*Math.PI/180 公式進(jìn)行計(jì)算

【4】繪制環(huán)境保存和還原

ctx.save() 保存當(dāng)前環(huán)境的狀態(tài)，可以把當(dāng)前繪制環(huán)境進(jìn)行保存到緩存中

ctx.restore() 恢復(fù)之前保存過的路徑狀態(tài)和屬性，獲取最近緩存的 ctx，一般配合位移畫布使用

一般在我們繪制具備同一種樣式的圖形時(shí)，都會(huì)用save() restore() 將其包裹起來。這是為了避免當(dāng)前的圖形樣式影響以后的圖形樣式。

【5】案例

<body>
  <canvas id="canvas"></canvas>
  <script>
    // 創(chuàng)建畫布
    const canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext('2d');

    // 縮放： scale(x,y)
    ctx.save()
    ctx.scale(2, 2); // 放大到200%
    ctx.fillRect(0, 0, 100, 100);
    ctx.restore()

    // 移動(dòng)： translate(x,y)
    ctx.save()
    ctx.translate(250, 0); // 移動(dòng)到x軸為250和y軸都為0的位置
    ctx.fillRect(0, 0, 100, 100);
    ctx.restore()

    // 旋轉(zhuǎn)： rotate(angle)
    ctx.save()
    ctx.rotate(Math.PI / 4);
    ctx.fillRect(300, 0, 100, 100);
    ctx.restore()
  </script>
</body>

文章每周持續(xù)更新，可以微信搜索「 前端大集錦 」第一時(shí)間閱讀，回復(fù)【視頻】【書籍】領(lǐng)取200G視頻資料和30本PDF書籍資料

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

canvas學(xué)習(xí)二

canvas學(xué)習(xí)二

一、繪制文字

二、繪制圖片

三、像素操作

四、變換

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

canvas學(xué)習(xí)二

一、繪制文字

二、繪制圖片

三、像素操作

四、變換

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

二、繪制圖片

三、像素操作

四、變換