JavaScript Canvas——“2D上下文”的注意要點

skinner 發布于2019-08-19 17:32 / 1570人閱讀

摘要：源圖像之外的目標圖像部分不會被顯示。使用異或操作對源圖像與目標圖像進行組合。如將第二個圖片放在第一個圖片下方檢查兼容性繪制原始圖像

Canvas支持基本繪圖能力的2D上下文，以及基于WebGL的3D上下文

基本用法

canvas元素：定義畫布

getContext()方法：定義2D、3D上下文

toDataURL()方法：生成圖片格式獲取URL鏈接（支持“image/png”；有瀏覽器也支持“image/jpeg”）

要使用canvas元素,必須先設置其width和height屬性,指定可以繪圖的區域大小.出現在開始和結束標簽中的內容是后備信息,如果瀏覽器不支持就顯示這些信息：

要在這塊畫布上繪圖,需要取得繪圖上下文,則需要調用getContext()方法并傳入上下文的名字,例如傳入"2d"；

var drawing = document.getElementById("drawing");
//確定瀏覽器是否支持canvas元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
}

可以使用toDataURL()方法導出在canvas元素上繪制的圖像如：

var drawing = document.getElementById("drawing");
//確定瀏覽器是否支持canvas元素
if (drawing.getContext) {
    //取得圖像數據的URL
    var imgURL = drawing.toDataURL("image/png");

    //顯示圖像
    var image = document.createElement("img");
    image.src = imgURL;
    document.body.appendChild(image);
}

舉個例子：

var drawing = document.getElementById("drawing");
//確定瀏覽器是否支持canvas元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    context.fillStyle = "gray";
    context.fillRect(100, 100, 100, 100);

    context.fillStyle = "#ccc";
    context.fillRect(100, 10, 100, 100);

    //取得圖像數據的URL
    var imgURL = drawing.toDataURL("image/png");

    //顯示圖像
    var image = document.createElement("img");
    image.src = imgURL;
    document.body.appendChild(image);
}

填充和描邊（基本操作）

填充,就是用指定的樣式填充圖形;描邊,就是只在圖形的邊緣畫線,分別涉及到兩個屬性:

fillStyle：填充

strokeStyle：描邊

這兩個屬性接收值是字符串、漸變對象或模式對象，默認值是“#000000”：

var drawing = document.getElementById("drawing");
//確定瀏覽器是否支持canvas元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    //描邊顏色
    context.strokeStyle = "red";
    //填充顏色
    context.fillStyle = "#ccc";
    //描邊矩形
    context.strokeRect(10, 10, 50, 50);
    //填充矩形
    context.fillRect(10, 10, 50, 50);
}

繪制矩形 基本方法

fillRect()填充矩形

strokeRect()描邊矩形

clearRect()清除矩形

四個方法都是接收4個參數:矩形的x坐標,矩形的y坐標,矩形的寬度和矩形的高度.這些參數的單位都是像素；

如填充一個矩形：

var drawing = document.getElementById("drawing");
//確定瀏覽器是否支持canvas元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    context.fillStyle = "orange";
    context.fillRect(10, 10, 50, 50);
}

如描邊一個矩形：

var drawing = document.getElementById("drawing");
//確定瀏覽器是否支持canvas元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    context.strokeStyle = "red";
    context.strokeRect(10, 10, 50, 50);
}

又如清除畫布上的矩形區域：

var drawing = document.getElementById("drawing");
//確定瀏覽器是否支持canvas元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    context.fillStyle = "red";
    context.fillRect(10, 10, 50, 50);
    context.clearRect(12, 12, 46, 46);
}

控制描邊的線條

lineWidth屬性：任意整數作為參數；

lineCap屬性：控制線條末端的形狀是（“butt”平頭、“round”圓頭、“square”方頭）

lineJoin屬性：線條香蕉的方式是（“round”圓交、“bevel”斜交、“miter”斜接）

繪制路徑

要繪制路徑,首先必須調用beginPath()方法,表示要開始繪制新路徑.然后,再通過調用下列方法來實際的繪制路徑

beginPath()：該方法表示開始繪制路徑

其次使用下面的方法繪制路徑：

arc(x, y, radius, startAngle, endAngle, counterclockwise):以(x,y)為圓心繪制一條弧線,弧線的半徑為radius,起始和結束角度(用弧度表示)分別為startAngle和endAngle.最后一個參數表示startAngle和endAngle是否按逆時針方向計算,值為false表示按順時針方向計算.

arcTo(x1, y1, x2, y2, radius):從上一點開始繪制一條弧線,到(x2, y2)為止,并且以給定的半徑radius穿過(x1, y1)

bezierCurveTo(c1x, c1y, c2x, c2y, x, y):從上一點開始繪制一條曲線,到(x,y)為止,并且以(c1x, c1y)和(c2x, c2y)為控制點.

lineTo(x, y):從上一點開始繪制一條直線,到(x, y)為止.

moveTo(x, y):將繪圖游標移動到(x, y),不畫線.

quadraticCurveTo(cx, cy, x, y):從上一點開始繪制一條二次曲線,到(x, y)為止,并且以(cx, cy)作為控制點.

rect(x, y, width, height):從點(x, y)開始繪制一個矩形,寬度和高度分別由width和height指定.這個方法繪制的是矩形路徑,而不是strokeRect()和fillRect()所繪制的獨立的形狀.

結束繪制路徑之前，可以檢測某個坐標是否在路徑軌跡上：

isPointInPath()：返回布爾值

結束繪制路徑之后，可以選擇使用下面的方法進一步處理：

closePath()：繪制一條連接到路徑起點的線條；

fill()：利用fillStyle填充；

stroke()：利用strokeStyle描邊；

clip()：創建一個剪切區域；

如：

var drawing = document.getElementById("drawing");
//確定瀏覽器是否支持canvas元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    context.beginPath();

    //繪制外圓
    context.arc(100, 100, 99, 0, 2 * Math.PI, false);
    //繪制內圓
    context.moveTo(194, 100);
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);
    //繪制分針
    context.moveTo(100, 100);
    context.lineTo(100,15);
    //繪制時針
    context.moveTo(100, 100);
    context.lineTo(35,100);

    context.stroke();
}

繪制文本

繪制文本通常有兩個方法:

fillText()（推薦使用）

strokeText()

measureText()：一個參數，即要繪制的文本

這兩個方法都可以接收4個參數:要繪制的文本字符串,x坐標,y坐標和可選的最大像素值.而且這三個方法都以下列3個屬性為基礎:

font:表示文本樣式,大小及字體,用CSS中指定字體的格式來指定.

textAlign:表示文本對其方式.可能的值有"start","end","left","right"和"center".不推薦使用"left"和"right".

textBaseline:表示文本的基線.可能的值有"top","hanging","middle","alphabetic","ideographic"和"bottom".值為top,y坐標表示文本頂端,值為"bottom",y坐標表示文本底端,值為hanging,alphabetic和ideographic,則y坐標分別指向字體的特定基線坐標.

如：

var drawing = document.getElementById("drawing");
//確定瀏覽器是否支持canvas元素
    if (drawing.getContext) {
        var context = drawing.getContext("2d");
        //font樣式
        context.font = "24px monospace";
        //對齊方式
        context.textAlign = "start";
        //基線位置
        context.textBaseline = "bottom";
        //填充樣式
        context.fillStyle = "red";
        context.fillText("hello there",100,100);
        //描邊樣式
        context.strokeStyle = "yellow";
        context.strokeText("hello there",100,100);
    }

對于measureText()方法，會返回測量字符串相關數據的一個對象，目前只有width屬性

console.log(context.measureText("Hello world")); //返回TextMetrics對象，該對象目前只有width屬性

變換

rotate(angle):圍繞原點旋轉圖像angle弧度.

scale(scaleX, scaleY):縮放圖像,在X方向乘以scaleX,在y方向乘以scaleY.scaleX和scaleY的默認值是1.0

translate(x, y):將坐標原定移動到(x, y).執行這個變換之后,坐標(0,0)會變成之前由(x,y)表示的點.

transform(m1_1, m1_2, m2_1, m2_2, dx, dy):直接修改變換矩陣,

方法是乘以如下矩陣:

m1_1 m1_2 dx
m2_1 m2_2 dy
0      0    1

setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy):將變換矩陣重置為默認狀態,然后再調用transform

如：

var drawing = document.getElementById("drawing");
//確定瀏覽器是否支持canvas元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    context.beginPath();
    context.arc(100, 100, 90, 0, 2 * Math.PI, false);
    //變換原點
    context.translate(100, 100);
    context.moveTo(0, 0);
    //旋轉
    context.rotate(1);        
    context.lineTo(0, -80);
    context.stroke();
}

而我們可以通過

save()

在堆棧中保存設置,而通過

restore()

方法恢復上一級狀態.我們可以連續使用save()和restore()方法。

var drawing = document.getElementById("drawing");
//確定瀏覽器是否支持canvas元素
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    context.fillStyle = "red";
    context.save(); //第一次存儲

    context.fillStyle="yellow";
    context.translate(100,100);
    context.save(); //第二次存儲

    context.fillStyle = "blue";
    context.fillRect(0,0,100,200); //因為translate把原點放在了100,100所以，從這個點開始繪制

    context.restore(); //第一次恢復
    context.fillRect(10,10,100,200); //繪制黃色圖形因為運用了一次restore();

    context.restore(); //第二次恢復
    context.fillRect(0,0,100,200); //原點恢復為0,0，繪制紅色圖形，因為又運用了一次restore();
}

要注意的是，save()保存的只是對繪圖上下文的設置和變換，不會保存繪圖上下文的內容。

繪制圖像

使用

drawImage()

方法來繪制圖像.有三種不同的參數組合:

傳入一個HTML元素,以及繪制該圖像的起點的x和y坐標.

如：

context.drawImage(img, 0, 0); //從0,0處插入繪制圖片

再多傳兩個參數,分別表示目標寬度和目標高度(進行縮放，不影響上下文的變換矩陣)

如：

context.drawImage(img, 0, 0,300,200); //從0,0處插入繪制圖片；長度為300高度為200；

再多傳4個參數,表示目標圖像的x,y坐標和目標圖像的寬度和高度(并沒有進行縮放):

如：

context.drawImage(img, 0, 0, 300, 200,100,100,100,80); //從0,0處插入繪制圖片；長度為300高度為200；繪制到上下文的100,100處，寬度為100高度為80；

需要注意的是：圖像不能來自其他域，否則toDataURL()會拋出錯誤。

陰影

shadowColor: 用CSS顏色格式表示的陰影顏色,默認為黑色

shadowOffsetX: 形狀或路徑x軸方向的陰影偏移量,默認為0

shadowOffsetY: 形狀或路徑y軸方向的陰影偏移量,默認為0

shadowBlur: 模糊的像素數,默認0,即不模糊

如：

if (drawing.getContext) {
    var context = drawing.getContext("2d");

    //設置陰影
    context.shadowColor ="red"; //陰影顏色
    context.shadowOffsetX = 10; //x軸偏移
    context.shadowOffsetY = 10; //y軸偏移
    context.shadowBlur = "100"; //陰影模糊的像素

    //繪制矩形
    context.fillStyle = "orange";
    context.fillRect(0,0,300,200);

}

漸變

漸變由CanvasGradient實例表示,調用

createLinearGradient()方法,此方法接收4個參數:起點的x坐標,起點的y坐標,終點的x坐標,終點的y坐標.調用這個方法后,它就會創建一個指定大小的漸變,并返回CanvasGradient對象實例.

創建了漸變對象后,下一步就是使用

addColorStop()方法來指定色標.接收兩個參數:色標位置和CSS顏色值.色標位置是一個0(開始的顏色)到1(結束的顏色)之間的數字.

如：

var drawing = document.getElementById("drawing");
var img = document.images[0];
// 確定瀏覽器是否支持canvas元素
window.onload = function() {
    if (drawing.getContext) {
        var context = drawing.getContext("2d");

        //創建漸變
        var gradient = context.createLinearGradient(0, 100, 200, 100);
        gradient.addColorStop(0, "red");
        gradient.addColorStop(1, "orange");

        //將漸變運用到矩形
        context.fillStyle = gradient;
        context.fillRect(0,0,200,100);
    }
};

如果要繪制非常準確的漸變矩形，則可以使用下面的函數：

function createRectLinearGradient(context, x, y, width, height) {
    return context.createLinearGradient(x, y, x + width, y + height);
}

如：

function createRectLinearGradient(context, x, y, width, height) {
    return context.createLinearGradient(x, y, x + width, y + height);
}

var gradient = createRectLinearGradient(context, 0, 0, 200, 100);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "orange");

context.fillStyle = gradient;
context.fillRect(0, 0, 200, 100);

要創建徑向漸變，就要調用

createRadialGradient()方法，接收6個參數：起點圓的圓心及半徑（前三個參數）；終點圓的圓心及半徑（后三個參數）：

如：

//移動原點
context.translate(50, 50);
//創建徑向漸變
var gradient = context.createRadialGradient(-20, -20, 10, 20, 20, 10);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "orange");
//填充矩形
context.fillStyle = gradient;
context.fillRect(-100, -100, 400, 400);

模式

模式就是重復的圖像,可以用來填充或描邊圖形.要創建一個新模式,可以調用：

createPattern()方法并傳入兩個參數:一個HTMLimg元素和一個表示如何重復圖像的字符串.

其中,第二個參數的值與CSS的background-repeat屬性值相同,包括"repeat","repeat-x","repeat-y","no-repeat"；另外，該方法的第一個參數也可以傳入video元素以及另一個canvas元素；

var context = drawing.getContext("2d");
//定義pattern
var pattern = context.createPattern(img,"repeat");
//填充
context.fillStyle = pattern;
context.fillRect(0,0,600,500);

使用圖像數據

通過

getImageData()取得原始圖像數據.這個方法接收4個參數:要取得其數據的畫面區域的x和y坐標以及該區域的像素寬度和高度:

setImageData()則根據圖像數據，在canvas中繪制出來

如：

window.onload = function() {
    var drawing = document.getElementById("drawing");
    var imgInput = document.images[0];
    //檢查兼容性
    if (drawing.getContext) {
        var context = drawing.getContext("2d");
        //繪制原始圖像
        context.drawImage(imgInput, 0, 0);
        //取得圖像數據
        var imageData = context.getImageData(0, 0, imgInput.width, imgInput.height);
        var data = imageData.data;
        for (var i = 0, len = data.length; i < len; i+=4) { //i應該是0,4,8...
            var red = data[i]; //0,4,8...
            var green = data[i + 1]; //1,5,9...
            var blue = data[i + 2]; //2,6,10...
            var alpha = data[i + 3]; //3,7,11
            //求得rgb平均值
            var average = Math.floor((red + green + blue) / 3);
            //設置顏色值，透明度不變
            data[i] = average;
            data[i + 1] = average;
            data[i + 2] = average;
        }
        //回寫數據并顯示結果
        imageData.data = data;
        context.putImageData(imageData, 0, 0);
    }
};

優化后的代碼：

    window.onload = function() {
    var drawing = document.getElementById("drawing"),
        imgInput = document.images[0],
        context,
        imageData,data,i,len,
        red, green, blue, alpha, average;
    //檢查兼容性
    if (drawing.getContext) {
        context = drawing.getContext("2d");
        //繪制原始圖像
        context.drawImage(imgInput, 0, 0);
        //取得圖像數據
        imageData = context.getImageData(0, 0, imgInput.width, imgInput.height);
        data = imageData.data;
        for (i = 0, len = data.length; i < len; i += 4) { //i應該是0,4,8...
            red = data[i]; //0,4,8...
            green = data[i + 1]; //1,5,9...
            blue = data[i + 2]; //2,6,10...
            alpha = data[i + 3]; //3,7,11
            //求得rgb平均值
            average = Math.floor((red + green + blue) / 3);
            //設置顏色值，透明度不變
            data[i] = average;
            data[i + 1] = average;
            data[i + 2] = average;
        }
        //回寫數據并顯示結果
        imageData.data = data;
        context.putImageData(imageData, 0, 0);
    }
};

或者讓圖片顏色反轉：

window.onload = function() {
    var drawing = document.getElementById("drawing");
    var imgInput = document.images[0];
    //檢查兼容性
    if (drawing.getContext) {
        var context = drawing.getContext("2d");
        //繪制原始圖像
        context.drawImage(imgInput, 0, 0);
        //取得圖像數據
        var imageData = context.getImageData(0, 0, imgInput.width, imgInput.height);
        var data = imageData.data;
        var i, len, red, green, blue, alpha;

        for (i = 0, len = data.length; i < len; i += 4) {
            red = data[i];
            green = data[i + 1];
            blue = data[i + 2];
            alpha = data[i + 3];
            //反轉顏色
            data[i] = 255 - data[i];
            data[i + 1] = 255 - data[i + 1];
            data[i + 2] = 255 - data[i + 2];
        }
        imageData.data = data;
        context.putImageData(imageData, 0, 0);
    }
};

合成

另外還有屬性：

globalAlpha；

globalCompositionOperation；

其中第一個屬性是一個介于0-1之間的值，用來指定所有繪制的透明度，這樣就可以先指定透明度，再畫圖，然后再重置透明度，如：

window.onload = function() {
    var drawing = document.getElementById("drawing");
    var imgInput = document.images[0];
    //檢查兼容性
    if (drawing.getContext) {
        var context = drawing.getContext("2d");
        //繪制原始圖像
        context.drawImage(imgInput, 0, 0);
        context.globalAlpha = 0.5;
        //半透明效果
        context.drawImage(imgInput, 50, 50);
        context.globalAlpha = 1;
        //不透明效果
        context.drawImage(imgInput, 100, 100);
    }
};

另外第二個屬性則表示后繪制的圖形怎樣與先繪制的圖形結合：

source-over：默認。在目標圖像上顯示源圖像。

source-atop：在目標圖像頂部顯示源圖像。源圖像位于目標圖像之外的部分是不可見的。

source-in：在目標圖像中顯示源圖像。只有目標圖像內的源圖像部分會顯示，目標圖像是透明的。

source-out：在目標圖像之外顯示源圖像。只會顯示目標圖像之外源圖像部分，目標圖像是透明的。

destination-over：在源圖像上方顯示目標圖像。

destination-atop：在源圖像頂部顯示目標圖像。源圖像之外的目標圖像部分不會被顯示。

destination-in：在源圖像中顯示目標圖像。只有源圖像內的目標圖像部分會被顯示，源圖像是透明的。

destination-out：在源圖像外顯示目標圖像。只有源圖像外的目標圖像部分會被顯示，源圖像是透明的。

lighter：顯示源圖像 + 目標圖像。

copy：顯示源圖像。忽略目標圖像。

source-over：使用異或操作對源圖像與目標圖像進行組合。

如將第二個圖片放在第一個圖片下方：

window.onload = function() {
    var drawing = document.getElementById("drawing");
    var imgInput = document.images[0];
    //檢查兼容性
    if (drawing.getContext) {
        var context = drawing.getContext("2d");
        //繪制原始圖像
        context.fillStyle = "red";
        context.fillRect(150, 20, 75, 50);

        context.globalCompositeOperation = "destination-over";
        
        context.fillStyle = "blue";
        context.fillRect(180, 50, 75, 50);
    }
};

云服務器 GPU云服務器云主機的要點深度學習的要點 html5的canvas vps日常維護中的一些要點總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78610.html

JavaScript Canvas——“WebGL”的注意要點

摘要：中有兩種著色器定點著色器和片段或像素著色器。頂點著色器用于將頂點轉換為需要渲染的點。的著色器是使用，著色器寫的，是一種與和完全不同的語言。為著色器傳遞數據的方式有兩種和。通過可以向頂點著色器傳入頂點信息，通過可以向任何著色器傳入常量值。 OpenGl:www.opengl.org WebGL:www.learningwebgl.com WebGL是針對Canvas的3D上下文；Open...

whidy 2019-08-19 17:33 評論0 收藏0
學習HTML5 Canvas這一篇文章就夠了

摘要：本文作者利用一些簡單的對進行了系統的總結，受益匪淺，毫不夸張的說，學習這一篇文章就夠了一簡介是新增的，一個可以使用腳本通常為在其中繪制圖像的元素。本文作者利用一些簡單的 demo 對 Canvas 進行了系統的總結，受益匪淺，毫不夸張的說，學習 Canvas 這一篇文章就夠了！一、canvas簡介 ? 是 HTML5 新增的，一個可以使用腳本(通常為JavaScript)在其中繪...

Eidesen 2019-08-26 12:12 評論0 收藏0
Html5 Canvas 學習之路（一）

摘要：一先來一個概述是屏幕上的一個由控制的即時模式位圖區域，通過調用，在每一幀完全重繪屏幕上的位圖。有這三個屬性代碼，放在外部文件中，代碼如下添加一個事件監聽器，在瀏覽器加載完頁面后調用函數。調用函數獲得上下文背景文字圖像顯示結果一：先來一個Hello World 1. 概述 Html5 Canvas 是屏幕上的一個由JavaScript控制的即時模式位圖區域，通過JavaScript調...

187J3X1 2019-08-22 16:23 評論0 收藏0
Canvas基礎

摘要：基礎使用元素必須為其設置寬度和高度屬性，指定可以繪制區域的大小。繪制路徑一切形狀的原始基礎都是路徑。其中規定要在圖像源中取得的切片位置和切片大小表示該切片在畫布中顯示的起始位置和大小。的狀態就是當前畫面應用的所有樣式和變形的一個快照。 title: Canvas基礎 date: 2016-11-09 tags: HTML5 0x00 Canvas 使用 Canvas 元素必須為...

tain335 2019-08-30 13:15 評論0 收藏0