html5 Canvas处理图像实例讲解

浏览数：22 / 时间：2015年06月09日

最近在学习canvas,canvas有很强大的图像处理功能，下面写一个我的学习总结：

canvas常用功能：

1. 绘制矩形、圆形、曲线、组合图形

2. 绘制文本

3.绘制渐变、变形的图形

4. 图片处理功能：绘制图片到画布、裁剪图片、

步骤：

1.在html中新增canvas元素，建议在canvas元素中设置width和height

2.编写js代码（需要在onload时调用绘制图形的函数）：

2.1 获取画布

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>