JavaScript Canvas——“2D上下文”的注意要點(diǎn)

skinner 發(fā)布于2019-08-19 17:32 / 1719人閱讀

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

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

基本用法

canvas元素：定義畫布

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

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

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

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

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

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

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

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

舉個(gè)例子：

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);

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

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

填充和描邊（基本操作）

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

fillStyle：填充

strokeStyle：描邊

這兩個(gè)屬性接收值是字符串、漸變對(duì)象或模式對(duì)象，默認(rèn)值是“#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()清除矩形

四個(gè)方法都是接收4個(gè)參數(shù):矩形的x坐標(biāo),矩形的y坐標(biāo),矩形的寬度和矩形的高度.這些參數(shù)的單位都是像素；

如填充一個(gè)矩形：

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

如描邊一個(gè)矩形：

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

又如清除畫布上的矩形區(qū)域：

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屬性：任意整數(shù)作為參數(shù)；

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

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

繪制路徑

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

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

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

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

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

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

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

moveTo(x, y):將繪圖游標(biāo)移動(dòng)到(x, y),不畫線.

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

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

結(jié)束繪制路徑之前，可以檢測(cè)某個(gè)坐標(biāo)是否在路徑軌跡上：

isPointInPath()：返回布爾值

結(jié)束繪制路徑之后，可以選擇使用下面的方法進(jìn)一步處理：

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

fill()：利用fillStyle填充；

stroke()：利用strokeStyle描邊；

clip()：創(chuàng)建一個(gè)剪切區(qū)域；

如：

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);
    //繪制內(nèi)圓
    context.moveTo(194, 100);
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);
    //繪制分針
    context.moveTo(100, 100);
    context.lineTo(100,15);
    //繪制時(shí)針
    context.moveTo(100, 100);
    context.lineTo(35,100);

    context.stroke();
}

繪制文本

繪制文本通常有兩個(gè)方法:

fillText()（推薦使用）

strokeText()

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

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

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

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

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

如：

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

對(duì)于measureText()方法，會(huì)返回測(cè)量字符串相關(guān)數(shù)據(jù)的一個(gè)對(duì)象，目前只有width屬性

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

變換

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

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

translate(x, y):將坐標(biāo)原定移動(dòng)到(x, y).執(zhí)行這個(gè)變換之后,坐標(biāo)(0,0)會(huì)變成之前由(x,y)表示的點(diǎn).

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):將變換矩陣重置為默認(rèn)狀態(tài),然后再調(diào)用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);
    //變換原點(diǎn)
    context.translate(100, 100);
    context.moveTo(0, 0);
    //旋轉(zhuǎn)
    context.rotate(1);        
    context.lineTo(0, -80);
    context.stroke();
}

而我們可以通過

save()

在堆棧中保存設(shè)置,而通過

restore()

方法恢復(fù)上一級(jí)狀態(tài).我們可以連續(xù)使用save()和restore()方法。

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

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

    context.fillStyle = "blue";
    context.fillRect(0,0,100,200); //因?yàn)閠ranslate把原點(diǎn)放在了100,100所以，從這個(gè)點(diǎn)開始繪制

    context.restore(); //第一次恢復(fù)
    context.fillRect(10,10,100,200); //繪制黃色圖形因?yàn)檫\(yùn)用了一次restore();

    context.restore(); //第二次恢復(fù)
    context.fillRect(0,0,100,200); //原點(diǎn)恢復(fù)為0,0，繪制紅色圖形，因?yàn)橛诌\(yùn)用了一次restore();
}

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

繪制圖像

使用

drawImage()

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

傳入一個(gè)HTML元素,以及繪制該圖像的起點(diǎn)的x和y坐標(biāo).

如：

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

再多傳兩個(gè)參數(shù),分別表示目標(biāo)寬度和目標(biāo)高度(進(jìn)行縮放，不影響上下文的變換矩陣)

如：

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

再多傳4個(gè)參數(shù),表示目標(biāo)圖像的x,y坐標(biāo)和目標(biāo)圖像的寬度和高度(并沒有進(jìn)行縮放):

如：

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

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

陰影

shadowColor: 用CSS顏色格式表示的陰影顏色,默認(rèn)為黑色

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

shadowOffsetY: 形狀或路徑y(tǒng)軸方向的陰影偏移量,默認(rèn)為0

shadowBlur: 模糊的像素?cái)?shù),默認(rèn)0,即不模糊

如：

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

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

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

}

漸變

漸變由CanvasGradient實(shí)例表示,調(diào)用

createLinearGradient()方法,此方法接收4個(gè)參數(shù):起點(diǎn)的x坐標(biāo),起點(diǎn)的y坐標(biāo),終點(diǎn)的x坐標(biāo),終點(diǎn)的y坐標(biāo).調(diào)用這個(gè)方法后,它就會(huì)創(chuàng)建一個(gè)指定大小的漸變,并返回CanvasGradient對(duì)象實(shí)例.

創(chuàng)建了漸變對(duì)象后,下一步就是使用

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

如：

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

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

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

如果要繪制非常準(zhǔn)確的漸變矩形，則可以使用下面的函數(shù)：

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);

要?jiǎng)?chuàng)建徑向漸變，就要調(diào)用

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

如：

//移動(dòng)原點(diǎn)
context.translate(50, 50);
//創(chuàng)建徑向漸變
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);

模式

模式就是重復(fù)的圖像,可以用來填充或描邊圖形.要?jiǎng)?chuàng)建一個(gè)新模式,可以調(diào)用：

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

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

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

使用圖像數(shù)據(jù)

通過

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

setImageData()則根據(jù)圖像數(shù)據(jù)，在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);
        //取得圖像數(shù)據(jù)
        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應(yīng)該是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);
            //設(shè)置顏色值，透明度不變
            data[i] = average;
            data[i + 1] = average;
            data[i + 2] = average;
        }
        //回寫數(shù)據(jù)并顯示結(jié)果
        imageData.data = data;
        context.putImageData(imageData, 0, 0);
    }
};

優(yōu)化后的代碼：

    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);
        //取得圖像數(shù)據(jù)
        imageData = context.getImageData(0, 0, imgInput.width, imgInput.height);
        data = imageData.data;
        for (i = 0, len = data.length; i < len; i += 4) { //i應(yīng)該是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);
            //設(shè)置顏色值，透明度不變
            data[i] = average;
            data[i + 1] = average;
            data[i + 2] = average;
        }
        //回寫數(shù)據(jù)并顯示結(jié)果
        imageData.data = data;
        context.putImageData(imageData, 0, 0);
    }
};

或者讓圖片顏色反轉(zhuǎn)：

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);
        //取得圖像數(shù)據(jù)
        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];
            //反轉(zhuǎn)顏色
            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；

其中第一個(gè)屬性是一個(gè)介于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);
    }
};

另外第二個(gè)屬性則表示后繪制的圖形怎樣與先繪制的圖形結(jié)合：

source-over：默認(rèn)。在目標(biāo)圖像上顯示源圖像。

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

source-in：在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像內(nèi)的源圖像部分會(huì)顯示，目標(biāo)圖像是透明的。

source-out：在目標(biāo)圖像之外顯示源圖像。只會(huì)顯示目標(biāo)圖像之外源圖像部分，目標(biāo)圖像是透明的。

destination-over：在源圖像上方顯示目標(biāo)圖像。

destination-atop：在源圖像頂部顯示目標(biāo)圖像。源圖像之外的目標(biāo)圖像部分不會(huì)被顯示。

destination-in：在源圖像中顯示目標(biāo)圖像。只有源圖像內(nèi)的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。

destination-out：在源圖像外顯示目標(biāo)圖像。只有源圖像外的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。

lighter：顯示源圖像 + 目標(biāo)圖像。

copy：顯示源圖像。忽略目標(biāo)圖像。

source-over：使用異或操作對(duì)源圖像與目標(biāo)圖像進(jìn)行組合。

如將第二個(gè)圖片放在第一個(gè)圖片下方：

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);
    }
};

云服務(wù)器 GPU云服務(wù)器云主機(jī)的要點(diǎn) 深度學(xué)習(xí)的要點(diǎn) html5的canvas vps日常維護(hù)中的一些要點(diǎn)總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78610.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

skinner

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

2018年值得期待11個(gè)Javascript動(dòng)畫庫

閱讀 930·2019-08-30 15:54
前端學(xué)習(xí)記錄（CSS篇）

閱讀 3412·2019-08-29 15:33
css揭秘筆記——視覺效果

閱讀 2797·2019-08-29 13:48
datatables增加跳轉(zhuǎn)指定頁功能, datatable自定義分頁

閱讀 1421·2019-08-26 18:26
2019 再聊移動(dòng)端 300ms 延遲及 fastClick 原理解析

閱讀 3443·2019-08-26 13:55
手寫實(shí)現(xiàn)promise

閱讀 1692·2019-08-26 10:45
http協(xié)議匯總

閱讀 1253·2019-08-26 10:19
標(biāo)準(zhǔn)庫（三）包裝對(duì)象

閱讀 383·2019-08-26 10:16

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

JavaScript Canvas——“2D上下文”的注意要點(diǎn)

相關(guān)文章

***JavaScript* Canvas——“WebGL”的注意*要點(diǎn)***

**學(xué)習(xí)HTML5 Canvas這一篇文章就夠了**

**Html5 Canvas 學(xué)習(xí)之路（一）**

Canvas基礎(chǔ)

發(fā)表評(píng)論

0條評(píng)論

skinner

男|高級(jí)講師

TA的文章

2018年值得期待11個(gè)Javascript動(dòng)畫庫

前端學(xué)習(xí)記錄（CSS篇）

css揭秘筆記——視覺效果

datatables增加跳轉(zhuǎn)指定頁功能, datatable自定義分頁

2019 再聊移動(dòng)端 300ms 延遲及 fastClick 原理解析

手寫實(shí)現(xiàn)promise

http協(xié)議匯總

標(biāo)準(zhǔn)庫（三）包裝對(duì)象

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

JavaScript Canvas——“2D上下文”的注意要點(diǎn)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！