講述Canvas結合JavaScript實作圖片特效-js教程-PHP中文網

首頁

web前端

js教程

講述Canvas結合JavaScript實作圖片特效

韦小宝

Mar 07, 2018 pm 04:49 PM

canvasjavascript實現

我們都知道canvas是HTML5中的，canvas可以做出很多特效等神奇的東西，而JavaScript當然也可以，但是canvas結合JavaScript來實現圖片特效你玩過嘛，沒有的話那麼我們一起來看看吧！

先看一下源圖和轉換成粒子效果的比較圖：

講述Canvas結合JavaScript實作圖片特效

#左側圖片為來源圖，右側圖片為粒子效果圖。該效果是在Canvas畫布上製作的。將圖片製作成粒子效果相對而言是比較簡單的。重點了解兩個知識點即可

1、圖片是透過image物件形式繪製在畫布上的，然後使用Canvas的getImageData接口，取得影像的像素資訊。

var imageData=ctx.getImageData(x, y, width, height);

參數說明：x，y為畫布上的x和y座標

width，height為取得指定區域影像的資訊

#傳回值說明：imageData為回傳值，它是一個對象，包含三個屬性

imageData={
    data:Unit8ClampedArray[10000] //一个包含图片区域内每个像素点的RGBA的整型数据信息
    height:200   //读取的图片像素信息区域高度
    width:200 　　//读取的图片像素信息区域宽度
}

2、了解像素區域資料的排布說明，以上所取得的圖片資料像素資訊(imageData物件中的data屬性)為RGBA整數的一維數組資料。一個像素是有4個值（R,G,B,A）組成的。也就是說，數組資訊每四個為一個像素點。因此，有以下規則，

第一個像素資訊為：RGBA(data[0],data[1],data[2],data[3])

第二個像素資訊為：RGBA(data[4],data[5],data[6],data[7])

.....

第N個像素資訊為: RGBA(data[(n-1)*4],data[(n-1)*4+1],data[(n-1)*4+2],data[(n-1)*4+3 ])

.....

另外，像素區域既然是一個區域，它是有寬和高的。上面的推算公式適合單獨一行使用定位一個像素點。所以計算像素點時要考慮到在整個影像區域內定位：

以上圖為例。影像的寬度和高度都為200，如果依照每一個像素為一行一列時。則該影像共有200行，200列。所以要取得 i 行第 j 列的像素初始位置資訊為：

var pos =[( i-1 )*200]+( j-1 )]*4;

其中，公式中的 i 表示行數，j 表示列數。 200為圖像的寬度。

demo代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400" style="background:#000">浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    var image = new Image();
    image.src=&#39;/WebWorkspace/EchartDemo/images/star.png&#39;;
    var pixels=[];  //存储像素数据
    var imageData;
    image.onload=function(){
        ctx.drawImage(image,200,100,200,200);
        imageData=ctx.getImageData(200,100,200,200);    //获取图表像素信息
        getPixels();    //获取所有像素
        drawPic();  //绘制图像
    };
    function getPixels(){
        var pos=0;
        var data=imageData.data;    //RGBA的一维数组数据
        //源图像的高度和宽度为200px
        for(var i=1;i<=200;i++){
            for(var j=1;j<=200;j++){
                pos=[(i-1)*200+(j-1)]*4; //取得像素位置
                if(data[pos]>=0){
                    var pixel={
                        x:200+j+Math.random()*20, //重新设置每个像素的位置信息
                        y:100+i+Math.random()*20, //重新设置每个像素的位置信息
                        fillStyle:&#39;rgba(&#39;+data[pos]+&#39;,&#39;+(data[pos+1])+&#39;,&#39;+(data[pos+2])+&#39;,&#39;+(data[pos+3])+&#39;)&#39;
                    }
                    pixels.push(pixel);
                }
            }
        }
    }
    function drawPic(){
        var canvas=document.getElementById("myCanvas");
        var ctx=canvas.getContext("2d");
        ctx.clearRect(0,0,600,400);
        var len=pixels.length,curr_pixel=null;
        for(var i=0;i<len;i++){
            curr_pixel=pixels[i];
            ctx.fillStyle=curr_pixel.fillStyle;
            ctx.fillRect(curr_pixel.x,curr_pixel.y,1,1);
        }
    }
</script>
</html>

上面如果不理解，對照程式碼運行一下試試看理解吧，切記圖片地址要改哦！不然會報錯的

類似閱讀：

#利用Canvas對圖片處理的方法

Canvas實現炫麗的粒子運動效果

以上是講述Canvas結合JavaScript實作圖片特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。