纯JavaScript实现HTML5 Canvas六种特效滤镜

时间2024-01-26 11:50:03发布访客分类HTML浏览217

导读：收集整理的这篇文章主要介绍了html5教程-纯JavaScript实现HTML5 Canvas六种特效滤镜，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢...

收集整理的这篇文章主要介绍了html5教程-纯JavaScript实现HTML5 Canvas六种特效滤镜，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

小试牛刀，实现了六款简单常见HTML5 canvas特效滤镜，并且封装成一个纯

JavaScript可调用的API文件gloomyFishfilter.js。支持的特效滤镜分别为：

1. 反色

2. 灰色调

3. 模糊

4. 浮雕

5. 雕刻

6. 镜像

滤镜原理解释：

1. 反色：获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b)

2. 灰色调：获取一个像素点RGB值r, g, b则新的RGB值为

newr = (r * 0.272) + (g * 0.534) + (b * 0.131);

newg = (r * 0.349) + (g * 0.686) + (b * 0.168);

newb = (r * 0.393) + (g * 0.769) + (b * 0.189);

3. 模糊：基于一个5*5的卷积核

4. 浮雕与雕刻：

基于当前像素的前一个像素RGB值与它的后一个像素的RGB值之差再加上128

5. 镜像：模拟了物体在镜子中与之对应的效果。

杂项准备

1. 如何获取Canvas 2d context对象

VAR canvas = document.getElementById("target");

canvas.width = source.clientWidth;

canvas.height = source.clientHeight;

if(!canvas.getContext) {

console.LOG("Canvas not supported. Please install a HTML5compatible browser.");

return;

}

// get 2D context of canvas and draw image

tempContext = canvas.getContext("2d");

2. 如何绘制一个DOM img对象到Canvas对象中

var source = document.getElementById("source");

tempContext.drawImage(source, 0, 0, canvas.width,canvas.height);

3. 如何从Canvas对象中获取像素数据

var canvas = document.getElementById("target");

varlen = canvas.width * canvas.height * 4;

var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

var binaryData = canvasData.data;

4. 如何对DOM对象实现鼠标Click事件绑定

function bindButtonEvent(element, tyPE, handler)

{

if(element.addEventListener){

element.addEventListener(type, handler,false);

} else {

element.attachEvent('on'+type, handler); // for IE6,7,8

}

5. 如何调用实现的gfilter API完成滤镜功能

scriptsrc="gloomyfishfilter.js"> /script> //导入API文件

gfilter.colorInvertPRocess(binaryData, len); //调用 API

6. 浏览器支持：IE, FF, Chrome上测试通过，其中IE上支持通过以下标签实现：

meta http-equiv="X-UA-Compatible"content="chrome=IE8">

效果演示：

应用程序源代码：

CSS部分：

[css]
#svgContainer {
    width:800px;
    height:600px;
    background-color:#EEEEEE;
}

#sourceDiv { float: left; border: 2px solid blue}
#targetDiv { float: right; border: 2px solid red}

#svgContainer {
width:800px;
height:600px;
background-color:#EEEEEE;
}

#sourceDiv { float: left; border: 2px solid blue}
#targetDiv { float: right; border: 2px solid red} filter1.html中HTML源代码：

[html]
!DOCTYPE html>
html>
head>
meta http-equiv="X-UA-Compatible" content="chrome=IE8">
meta http-equiv="Content-type" content="text/html; charset=UTF-8">
tITle> Canvas Filter Demo/title>
link href="default.css" rel="stylesheet" />
script src="gloomyfishfilter.js"> /scrip>
/head>
body>
    h1> HTML Canvas Image Process - By Gloomy Fish/h1>
    p id="svgContainer">
        p id="sourceDiv">
            img id="source" src="../test.png" />
        /p>
        p id="targetDiv">
            canvas id="target"> /canvas>
        /p>
    /p>
    p id="BTn-group">
        button type="button" id="invert-button"> 反色/button>
        button type="button" id="adjust-button"> 灰色调/button>
        button type="button" id="blur-button"> 模糊/button>
        button type="button" id="relief-button"> 浮雕/button>
        button type="button" id="diaoke-button"> 雕刻/button>
        button type="button" id="mirror-button"> 镜像/button>
    /p>
/body>
/html>

!DOCTYPE html>
html>
head>
meta http-equiv="X-UA-Compatible" content="chrome=IE8">
meta http-equiv="Content-type" content="text/html; charset=UTF-8">
title> Canvas Filter Demo/title>
link href="default.css" rel="stylesheet" />
script src="gloomyfishfilter.js"> /scrip>
/head>
body>
h1> HTML Canvas Image Process - By Gloomy Fish/h1>
p id="svgContainer">
  p id="sourceDiv">
   img id="source" src="../test.png" />
  /p>
  p id="targetDiv">
   canvas id="target"> /canvas>
  /p>
/p>
p id="btn-group">
  button type="button" id="invert-button"> 反色/button>
  button type="button" id="adjust-button"> 灰色调/button>
  button type="button" id="blur-button"> 模糊/button>
  button type="button" id="relief-button"> 浮雕/button>
  button type="button" id="diaoke-button"> 雕刻/button>
  button type="button" id="mirror-button"> 镜像/button>
/p>
/body>
/html>
filter1.html中JavaScript源代码：

[javascript]
var tempContext = null; // global variable 2d context
window.onload = function() {
    var source = document.getElementById("source");
    var canvas = document.getElementById("target");
    canvas.width = source.clientWidth;
    canvas.height = source.clientHeight;

    if (!canvas.getContext) {
        console.log("Canvas not supported. Please install a HTML5 compatible browser.");
        return;
    }

    // get 2D context of canvas and draw image
    tempContext = canvas.getContext("2d");
    tempContext.drawImage(source, 0, 0, canvas.width, canvas.height);

       // initialization actions
       var inButton = document.getElementById("invert-button");
       var adButton = document.getElementById("adjust-button");
       var blurButton = document.getElementById("blur-button");
       var reButton = document.getElementById("relief-button");
       var dkButton = document.getElementById("diaoke-button");
       var mirrorButton = document.getElementById("mirror-button");

       // bind mouse click event
       bindButtonEvent(inButton, "click", invertColor);
       bindButtonEvent(adButton, "click", adjustColor);
       bindButtonEvent(blurButton, "click", blurImage);
       bindButtonEvent(reButton, "click", fudiaoImage);
       bindButtonEvent(dkButton, "click", kediaoImage);
       bindButtonEvent(mirrorButton, "click", mirrorImage);
}

function bindButtonEvent(element, type, handler)
{
    if(element.addEventListener) {
       element.addEventListener(type, handler, false);
    } else {
       element.attachEvent('on'+type, handler); // for IE6,7,8
    }
}

function invertColor() {
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
    var binaryData = canvasData.data;

       // Processing all the pixels
       gfilter.colorInvertProcess(binaryData, len);

       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}

function adjustColor() {
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
       var binaryData = canvasData.data;

       // Processing all the pixels
       gfilter.colorAdjustProcess(binaryData, len);

       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}

function blurImage()
{
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

       // Processing all the pixels
       gfilter.blurProcess(tempContext, canvasData);

       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}

function fudiaoImage()
{
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

       // Processing all the pixels
       gfilter.reliefProcess(tempContext, canvasData);

       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}

function kediaoImage()
{
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

       // Processing all the pixels
       gfilter.diaokeProcess(tempContext, canvasData);

       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}

function mirrorImage()
{
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

       // Processing all the pixels
       gfilter.mirrorProcess(tempContext, canvasData);

       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}

  var tempContext = null; // global variable 2d context
  window.onload = function() {
   var source = document.getElementById("source");
   var canvas = document.getElementById("target");
   canvas.width = source.clientWidth;
   canvas.height = source.clientHeight;

   if (!canvas.getContext) {
       console.log("Canvas not supported. Please install a HTML5 compatible browser.");
       return;
   }

   // get 2D context of canvas and draw image
   tempContext = canvas.getContext("2d");
   tempContext.drawImage(source, 0, 0, canvas.width, canvas.height);

         // initialization actions
         var inButton = document.getElementById("invert-button");
         var adButton = document.getElementById("adjust-button");
         var blurButton = document.getElementById("blur-button");
         var reButton = document.getElementById("relief-button");
         var dkButton = document.getElementById("diaoke-button");
         var mirrorButton = document.getElementById("mirror-button");

         // bind mouse click event
         bindButtonEvent(inButton, "click", invertColor);
         bindButtonEvent(adButton, "click", adjustColor);
         bindButtonEvent(blurButton, "click", blurImage);
         bindButtonEvent(reButton, "click", fudiaoImage);
         bindButtonEvent(dkButton, "click", kediaoImage);
         bindButtonEvent(mirrorButton, "click", mirrorImage);
  }

  function bindButtonEvent(element, type, handler)
  {
   if(element.addEventListener) {
      element.addEventListener(type, handler, false);
   } else {
      element.attachEvent('on'+type, handler); // for IE6,7,8
   }
  }

  function invertColor() {
   var canvas = document.getElementById("target");
   var len = canvas.width * canvas.height * 4;
   var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
   var binaryData = canvasData.data;

         // Processing all the pixels
         gfilter.colorInvertProcess(binaryData, len);

         // Copying back canvas data to canvas
         tempContext.putImageData(canvasData, 0, 0);
  }

  function adjustColor() {
   var canvas = document.getElementById("target");
   var len = canvas.width * canvas.height * 4;
   var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
         var binaryData = canvasData.data;

         // Processing all the pixels
         gfilter.colorAdjustProcess(binaryData, len);

         // Copying back canvas data to canvas
         tempContext.putImageData(canvasData, 0, 0);
  }

  function blurImage()
  {
   var canvas = document.getElementById("target");
   var len = canvas.width * canvas.height * 4;
   var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

         // Processing all the pixels
         gfilter.blurProcess(tempContext, canvasData);

         // Copying back canvas data to canvas
         tempContext.putImageData(canvasData, 0, 0);
  }

  function fudiaoImage()
  {
   var canvas = document.getElementById("target");
   var len = canvas.width * canvas.height * 4;
   var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

         // Processing all the pixels
         gfilter.reliefProcess(tempContext, canvasData);

         // Copying back canvas data to canvas
         tempContext.putImageData(canvasData, 0, 0);
  }

  function kediaoImage()
  {
   var canvas = document.getElementById("target");
   var len = canvas.width * canvas.height * 4;
   var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

         // Processing all the pixels
         gfilter.diaokeProcess(tempContext, canvasData);

         // Copying back canvas data to canvas
         tempContext.putImageData(canvasData, 0, 0);
  }

  function mirrorImage()
  {
   var canvas = document.getElementById("target");
   var len = canvas.width * canvas.height * 4;
   var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

         // Processing all the pixels
         gfilter.mirrorProcess(tempContext, canvasData);

         // Copying back canvas data to canvas
         tempContext.putImageData(canvasData, 0, 0);
  } 滤镜源代码(gloomyfishfilter.js)：

[javascript]
var gfilter = {
    type: "canvas",
    name: "filters",
    author: "zhigang",
    getInfo: function () {
        return this.author + ' ' + this.type + ' ' + this.name;
    } ,

    /**
     * invert color value of pixel, new pixel = RGB(255-r, 255-g, 255 - b)
     *
     * @param binaryData - canvas's imagedata.data
     * @param l - length of data (width * height of image data)
     */
    colorInvertProcess: function(binaryData, l) {
        for (var i = 0; i l; i += 4) {
            var r = binaryData[i];
            var g = binaryData[i + 1];
            var b = binaryData[i + 2];

            binaryData[i] = 255-r;
            binaryData[i + 1] = 255-g;
            binaryData[i + 2] = 255-b;
        }
    } ,

    /**
     * adjust color values and make it more darker and gray...
     *
     * @param binaryData
     * @param l
     */
    colorAdjustProcess: function(binaryData, l) {
        for (var i = 0; i l; i += 4) {
            var r = binaryData[i];
            var g = binaryData[i + 1];
            var b = binaryData[i + 2];

            binaryData[i] = (r * 0.272) + (g * 0.534) + (b * 0.131);
            binaryData[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168);
            binaryData[i + 2] = (r * 0.393) + (g * 0.769) + (b * 0.189);
        }
    } ,

    /**
     * deep clone image data of canvas
     *
     * @param context
     * @param src
     * @returns
     */
    copyImageData: function(context, src)
    {
        var dst = context.createImageData(src.width, src.height);
        dst.data.set(src.data);
        return dst;
    } ,

    /**
     * convolution - keneral size 5*5 - blur effect filter(模糊效果)
     *
     * @param context
     * @param canvasData
     */
    blurProcess: function(context, canvasData) {
        console.log("Canvas Filter - blur process");
        var tempCanvasData = this.copyImageData(context, canvasData);
        var sumred = 0.0, sumgreen = 0.0, sumblue = 0.0;
        for ( var x = 0; x tempCanvasData.width; x++) {
            for ( var y = 0; y tempCanvasData.height; y++) {

                // Index of the pixel in the array
                var idx = (x + y * tempCanvasData.width) * 4;
                for(var subCol=-2; subCol=2; subCol++) {
                    var colOff = subCol + x;
                    if(colOff 0 || colOff > = tempCanvasData.width) {
                        colOff = 0;
                    }
                    for(var subRow=-2; subRow=2; subRow++) {
                        var rowOff = subRow + y;
                        if(rowOff 0 || rowOff > = tempCanvasData.height) {
                            rowOff = 0;
                        }
                        var idx2 = (colOff + rowOff * tempCanvasData.width) * 4;
                        var r = tempCanvasData.data[idx2 + 0];
                        var g = tempCanvasData.data[idx2 + 1];
                        var b = tempCanvasData.data[idx2 + 2];
                        sumred += r;
                        sumgreen += g;
                        sumblue += b;
                    }
                }

                // calculate new RGB value
                var nr = (sumred / 25.0);
                var ng = (sumgreen / 25.0);
                var nb = (sumblue / 25.0);

                // clear previous for next pixel point
                sumred = 0.0;
                sumgreen = 0.0;
                sumblue = 0.0;

                // assign new pixel value
                canvasData.data[idx + 0] = nr; // Red channel
                canvasData.data[idx + 1] = ng; // Green channel
                canvasData.data[idx + 2] = nb; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
            }
        }
    } ,

    /**
     * after pixel value - before pixel value + 128
     * 浮雕效果
     */
    reliefProcess: function(context, canvasData) {
        console.log("Canvas Filter - relief process");
        var tempCanvasData = this.copyImageData(context, canvasData);
        for ( var x = 1; x tempCanvasData.width-1; x++)
        {
            for ( var y = 1; y tempCanvasData.height-1; y++)
            {

                // Index of the pixel in the array
                var idx = (x + y * tempCanvasData.width) * 4;
                var bidx = ((x-1) + y * tempCanvasData.width) * 4;
                var aidx = ((x+1) + y * tempCanvasData.width) * 4;

                // calculate new RGB value
                var nr = tempCanvasData.data[aidx + 0] - tempCanvasData.data[bidx + 0] + 128;
                var ng = tempCanvasData.data[aidx + 1] - tempCanvasData.data[bidx + 1] + 128;
                var nb = tempCanvasData.data[aidx + 2] - tempCanvasData.data[bidx + 2] + 128;
                nr = (nr 0) ? 0 : ((nr > 255) ? 255 : nr);
                ng = (ng 0) ? 0 : ((ng > 255) ? 255 : ng);
                nb = (nb 0) ? 0 : ((nb > 255) ? 255 : nb);

                // assign new pixel value
                canvasData.data[idx + 0] = nr; // Red channel
                canvasData.data[idx + 1] = ng; // Green channel
                canvasData.data[idx + 2] = nb; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
            }
        }
    } ,

    /**
     * before pixel value - after pixel value + 128
     * 雕刻效果
     *
     * @param canvasData
     */
    diaokeProcess: function(context, canvasData) {
        console.log("Canvas Filter - process");
        var tempCanvasData = this.copyImageData(context, canvasData);
        for ( var x = 1; x tempCanvasData.width-1; x++)
        {
            for ( var y = 1; y tempCanvasData.height-1; y++)
            {

                // Index of the pixel in the array
                var idx = (x + y * tempCanvasData.width) * 4;
                var bidx = ((x-1) + y * tempCanvasData.width) * 4;
                var aidx = ((x+1) + y * tempCanvasData.width) * 4;

                // calculate new RGB value
                var nr = tempCanvasData.data[bidx + 0] - tempCanvasData.data[aidx + 0] + 128;
                var ng = tempCanvasData.data[bidx + 1] - tempCanvasData.data[aidx + 1] + 128;
                var nb = tempCanvasData.data[bidx + 2] - tempCanvasData.data[aidx + 2] + 128;
                nr = (nr 0) ? 0 : ((nr > 255) ? 255 : nr);
                ng = (ng 0) ? 0 : ((ng > 255) ? 255 : ng);
                nb = (nb 0) ? 0 : ((nb > 255) ? 255 : nb);

                // assign new pixel value
                canvasData.data[idx + 0] = nr; // Red channel
                canvasData.data[idx + 1] = ng; // Green channel
                canvasData.data[idx + 2] = nb; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
            }
        }
    } ,

    /**
     * mirror reflect
     *
     * @param context
     * @param canvasData
     */
    mirrorProcess : function(context, canvasData) {
        console.log("Canvas Filter - process");
        var tempCanvasData = this.copyImageData(context, canvasData);
        for ( var x = 0; x tempCanvasData.width; x++) // column
        {
            for ( var y = 0; y tempCanvasData.height; y++) // row
            {

                // Index of the pixel in the array
                var idx = (x + y * tempCanvasData.width) * 4;
                var midx = (((tempCanvasData.width -1) - x) + y * tempCanvasData.width) * 4;

                // assign new pixel value
                canvasData.data[midx + 0] = tempCanvasData.data[idx + 0]; // Red channel
                canvasData.data[midx + 1] = tempCanvasData.data[idx + 1]; ; // Green channel
                canvasData.data[midx + 2] = tempCanvasData.data[idx + 2]; ; // Blue channel
                canvasData.data[midx + 3] = 255; // Alpha channel
            }
        }
    } ,
} ;

纯JavaScript实现HTML5 Canvas六种特效滤镜

小试牛刀，实现了六款简单常见HTML5 Canvas特效滤镜，并且封装成一个纯

JavaScript可调用的API文件gloomyfishfilter.js。支持的特效滤镜分别为：

1. 反色

2. 灰色调

3. 模糊

4. 浮雕

5. 雕刻

6. 镜像

滤镜原理解释：

1. 反色：获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b)

2. 灰色调：获取一个像素点RGB值r, g, b则新的RGB值为

newr = (r * 0.272) + (g * 0.534) + (b * 0.131);

newg = (r * 0.349) + (g * 0.686) + (b * 0.168);

newb = (r * 0.393) + (g * 0.769) + (b * 0.189);

3. 模糊：基于一个5*5的卷积核

4. 浮雕与雕刻：

基于当前像素的前一个像素RGB值与它的后一个像素的RGB值之差再加上128

5. 镜像：模拟了物体在镜子中与之对应的效果。

杂项准备

1. 如何获取Canvas 2d context对象

var canvas = document.getElementById("target");

canvas.width = source.clientWidth;

canvas.height = source.clientHeight;

if(!canvas.getContext) {

console.log("Canvas not supported. Please install a HTML5compatible browser.");

return;

}

// get 2D context of canvas and draw image

tempContext = canvas.getContext("2d");

2. 如何绘制一个DOM img对象到Canvas对象中

var source = document.getElementById("source");

tempContext.drawImage(source, 0, 0, canvas.width,canvas.height);

3. 如何从Canvas对象中获取像素数据

var canvas = document.getElementById("target");

varlen = canvas.width * canvas.height * 4;

var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

var binaryData = canvasData.data;

4. 如何对DOM对象实现鼠标Click事件绑定

function bindButtonEvent(element, type, handler)

{

if(element.addEventListener){

element.addEventListener(type, handler,false);

} else {

element.attachEvent('on'+type, handler); // for IE6,7,8

}

5. 如何调用实现的gfilter API完成滤镜功能

scriptsrc="gloomyfishfilter.js"> /script> //导入API文件

gfilter.colorInvertProcess(binaryData, len); //调用 API

6. 浏览器支持：IE, FF, Chrome上测试通过，其中IE上支持通过以下标签实现：

meta http-equiv="X-UA-Compatible"content="chrome=IE8">

效果演示：

应用程序源代码：

CSS部分：

[css]
#svgContainer {
    width:800px;
    height:600px;
    background-color:#EEEEEE;
}

#sourceDiv { float: left; border: 2px solid blue}
#targetDiv { float: right; border: 2px solid red}

[html]
!DOCTYPE html>
html>
head>
meta http-equiv="X-UA-Compatible" content="chrome=IE8">
meta http-equiv="Content-type" content="text/html; charset=UTF-8">
title> Canvas Filter Demo/title>
link href="default.css" rel="stylesheet" />
script src="gloomyfishfilter.js"> /scrip>
/head>
body>
    h1> HTML Canvas Image Process - By Gloomy Fish/h1>
    p id="svgContainer">
        p id="sourceDiv">
            img id="source" src="../test.png" />
        /p>
        p id="targetDiv">
            canvas id="target"> /canvas>
        /p>
    /p>
    p id="btn-group">
        button type="button" id="invert-button"> 反色/button>
        button type="button" id="adjust-button"> 灰色调/button>
        button type="button" id="blur-button"> 模糊/button>
        button type="button" id="relief-button"> 浮雕/button>
        button type="button" id="diaoke-button"> 雕刻/button>
        button type="button" id="mirror-button"> 镜像/button>
    /p>
/body>
/html>

         // Copying back canvas data to canvas
         tempContext.putImageData(canvasData, 0, 0);
  } 滤镜源代码(gloomyfishfilter.js)：

觉得可用，就经常来吧！欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

API Array CSS div DOM HTML html5 post-format-gallery this

若转载请注明出处：纯JavaScript实现HTML5 Canvas六种特效滤镜
本文地址： https://pptw.com/jishu/586722.html

CSS font-feature-settings 50+关键字属性值完整介绍 5分钟快速了解下CSS4 color-adjust属性