html5 Canvas處理圖像實例講解

時間 2019-12-08

標籤 html5 html canvas 處理圖像實例講解欄目 HTML5 简体版

原文原文鏈接

最近在學習canvas,canvas有很強大的圖像處理功能，下面寫一個個人學習總結：html

canvas經常使用功能：chrome

1. 繪製矩形、圓形、曲線、組合圖形canvas

2. 繪製文本瀏覽器

3.繪製漸變、變形的圖形ide

4. 圖片處理功能：繪製圖片到畫布、裁剪圖片、函數

步驟：學習

1.在html中新增canvas元素，建議在canvas元素中設置width和heightui

2.編寫js代碼（須要在onload時調用繪製圖形的函數）：spa

2.1 獲取畫布code

2.2 獲取畫筆：圖像上下文、封裝了圖像繪製功能的對象，目前只支持2d

2.3 設置圖像樣式：填充樣式（fillStyle）和邊框樣式（strokeStyle）

2.4 指定線寬：lineWidth

2.5 圖像變形：平移translate(x,y)、縮放scale(x,y)、旋轉rotate(rangle)

2.6 填充（fill）與繪製邊框（stroke）

示例：

1.繪製矩形

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
    <script>
        pageInit("c1");

        function pageInit(id){
            var canvas=document.getElementById(id);
            if(canvas==null) 
                    return false;
            var context = canvas.getContext('2d');
            with(context){
                    //畫布背景
                    fillStyle="#EEEEFF";
                    fillRect(0,0,200,200);
                    //矩形
                    fillStyle="yellow";
                    fillRect(0,0,100,100);
                    //邊框
                    strokeStyle="red";
                    lineWidth=1;
                    strokeRect(0,0,100,100);
            }
        }
    </script>
</body>
</html>

View Code

運行圖像：

2.操做圖像

火狐瀏覽器第一次打開時可能報錯：NS_ERROR_NOT_AVAILABLE，運行後刷新瀏覽器便可

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Canvas_Image</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    #content{
        width: 900px;
        height: 800px;
        margin: auto;
        text-align: center;
    }
    #c1{
        border:1px blue solid;
    }
</style>
</head>
<body>
    <div id="content">
        <h1>Canvas 處理圖像</h1>
        <canvas id="c1" width="800" height="600"></canvas>
        <div>
        <label for="sel1">圖像平鋪方式</label>
        <select id="sel1">
            <option value="no-repeat" selected>no-repeat</option>
            <option value="repeat-x">repeat-x</option>
            <option value="repeat-y">repeat-y</option>
            <option value="repeat">repeat</option>
        </select>
        <button id="btnScale">局部放大</button>
        <button id="btnImgData">圖像反顯</button>
    </div>
    </div>
    <script>
        //定義全局變量
        var GLOBAL={};
        GLOBAL.id="c1";
        GLOBAL.img = new Image();
        GLOBAL.img.src="images/1.jpg";
        //加載入口函數，至關於jQuery中的$(document).ready
        pageInit();

        function pageInit(){
            //獲取畫布
            canvas=document.getElementById(GLOBAL.id);
            //獲取畫筆
            context = canvas.getContext('2d');
            CopyAndRepeat(context,GLOBAL.img);
        }
        //圖像平鋪
        function CopyAndRepeat(context,img){
            var cType = document.getElementById("sel1");
            //alert(cType.value);
            clearCanvas(context);
            with(context){
                var ptrn=createPattern(img,cType.value);
                fillStyle=ptrn;
                fillRect(0,0,800,600);
            }
        }
        //複製、局部放大
        function CopyAndScale(){
            id=GLOBAL.id;
            canvas=document.getElementById(id);
            context = canvas.getContext('2d');
            clearCanvas(context);
            with(context){
                drawImage(GLOBAL.img,0,0);
                drawImage(GLOBAL.img,20,20,100,100,165,0,156,165);
            }
        }
        //圖像反顯
        function ReverseImg(){
            id=GLOBAL.id;
            canvas=document.getElementById(id);
            context = canvas.getContext('2d');
            clearCanvas(context);
            with(context){
                drawImage(GLOBAL.img,0,0);
                var imgData = getImageData(0,0,GLOBAL.img.width,GLOBAL.img.height);
                console.dir(imgData);
                for(var i=0, n=imgData.data.length; i<n; i+=4){
                    imgData.data[i+0]=255-imgData.data[i+0];    //red
                    imgData.data[i+1]=255-imgData.data[i+1];    //green
                    imgData.data[i+2]=255-imgData.data[i+2];    //blue
                }
                putImageData(imgData,0,0);
            }
        }
        //清除畫布
        function clearCanvas(context){
            with(context){
                //清除畫布
                clearRect(10,0,800,600);
                //設置背景色
                fillStyle="#EEFFFF";
                fillRect(0,0,800,600);
            }
        }
        document.getElementById("btnScale").onclick=function(){
            CopyAndScale();
        }
        document.getElementById("btnImgData").onclick=function(){
            ReverseImg();
        }
        document.getElementById("sel1").onchange=function(){
            canvas=document.getElementById(GLOBAL.id);
            context = canvas.getContext('2d');
            CopyAndRepeat(context,GLOBAL.img);
        }
    </script>
</body>
</html>