最近在学习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>

运行图像：

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="data: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>

运行图像：

html5 Canvas处理图像 实例讲解的更多相关文章

  1. HTML5 canvas globalCompositeOperation绘图类型讲解

    我们总是将一个图形画在另一个之上,大多数情况下,这样是不够的.比如说,它这样受制于图形的绘制顺序.不过,我们可以利用 globalCompositeOperation 属性来改变这些做法.global ...

  2. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  3. HTML5 Canvas arc()函数//////////////////////(转)

    HTML5 Canvas arc()函数   实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...

  4. Html5 Canvas 实现滚动的图片

    今天一直在找html5 canvas的使用实例.想画一张地图,再画个小车在上面跑.运气好找到了一个大神写的js代码.该代码实现了图片的左右来回滚动,现在粘贴在博客里记录一下: <html> ...

  5. HTML5 Canvas图片操作简单实例1

    1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...

  6. HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...

  7. html5 canvas用动画的形式装载图像

    本示例使用HTML5 canvas,简单的编写了装载图片效果, 请使用支持HTML5的浏览器预览效果: 下图为以逐渐横向栅格的效果图 html部分: <!DOCTYPE html> < ...

  8. HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. html5 canvas 圆形抽奖的实例

    年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...

随机推荐

  1. Android 启动Service服务和发送Broadcast广播的常用方法

    一.先说Service服务. 1.利用setAction()方法来指定启动的Service服务 Intent intent = new Intent(); intent.setAction(" ...

  2. Oracle创建数据库、表、用户

    create tablespace south_knowledge logging datafile 'D:\TestDatabase\south_knowledge.dbf' size 10m au ...

  3. 获取设备、APP的一些信息

    获取设备的一些信息: UIDevice *device = [UIDevice currentDevice]; @property(nonatomic,readonly,strong) NSStrin ...

  4. UIView和其子类的几个初始化函数执行的时机

    -(id)initWithFrame:(CGRect)frame - UIView的指定初始化方法; 总是发送给UIView去初始化, 除非是从一个nib文件中加载的; -(id)initWithCo ...

  5. BZOJ 3368 约翰看山（扫描）O(N)

    这题,简直丧心病狂了. 大意是给你一个环上一些覆盖的区间,让你求总覆盖长度. 非常坑的点是这个区间因为是个环,所以可能逆时针给你,也可能顺时针给你,你特别要注意.那么区分顺时针和逆时针的方法 就是,题 ...

  6. SpringMVC的web.xml配置注意

    web.xml需要放过所有资源文件,这个就看自己的系统中有哪些静态文件.一般的都是.js..css..jpg..png.jpeg等等,但是我还用到一些字体文件资源,所以也要过滤,不然前台会找不到. & ...

  7. 【典型错误】The type java.lang.Object cannot be resolved.

    参考:http://blog.csdn.net/wo519074786/article/details/7697967 The type java.lang.Object cannot be reso ...

  8. js中邦定事件与解绑支持匿名函数

    和一个朋友讨论了一下,DOM2绑定方式都是有名的函数,匿名的处理起来有些麻烦,而且即使是有名的函数,在IE低版本的浏览器也是解除不掉的,this指向需要修改,着实费了一番功夫,这个是兼容ie低版本的, ...

  9. Flask把变量注册到模板中

    使用python的Flask框架时,参考<Flask Web开发>一书时,发现书中可以在全局使用Permission.FOLLOW变量. 但是自己在尝试是,确提示变量没有定义.经过搜索,找 ...

  10. std::map的insert和下标[]访问

    在map中插入元素 改变map中的条目非常简单,因为map类已经对[]操作符进行了重载 enumMap[1] = "One";enumMap[2] = "Two" ...