最近在学习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. Win7 64位系统上配置使用32位的Eclipse(转)

    Win7 64位系统上配置使用32位的Eclipse 博客分类: Eclipse eclipse  最近工作电脑换成了64位的win7系统,之前个人电脑上安装的jdk和Eclipse都是32位的.而新 ...

  2. react学习之props

    中秋过后刚好结束在上一家公司的工作,明天开始要正式的找工作了,最近也投了几家公司收到几分面试邀请.在面试的过程中几个面试官聊到了react(当然也有聊了vue,angular).感觉不懂react都不 ...

  3. mysql事件调度器功能

    一.前言 自MySQL5.1.6起,增加了一个非常有特色的功能–事件调度器(Event Scheduler),可以用做定时执行某些特定任务(例如:删除记录.对数据进行汇总等等),来取代原先只能由操作系 ...

  4. python核心编程-第四章-个人笔记

    1.所有的python对象都拥有三个特性: ①身份:每个对象都有唯一的身份标识自己,可用内建函数id()来得到.基本不会用到,不用太关心 >>> a = 2 >>> ...

  5. TCP协议: SYN ACK FIN RST PSH URG 详解

    TCP的三次握手是怎么进行的了:发送端发送一个SYN=1,ACK=0标志的数据包给接收端,请求进行连接,这是第一次握手:接收端收到请求并且允许连接的话,就会发送一个SYN=1,ACK=1标志的数据包给 ...

  6. Oracle EBS-SQL (INV-9):检查搬运单分配异常.sql

    select h.request_number,         l.line_number,         msib.segment1 item_code,         t.transacti ...

  7. 通过HOOK控制进程的创建

    一. 简介 最近,我了解到一个叫做Sanctuary的相当有趣的安全产品.它能够阻止任何程序的运行-这些程序没有显示在软件列表中-该表中的程序被允许在一个特定的机器上运行.结果,PC用户得到保护而免于 ...

  8. C++类对应的内存结构

    提示1:对“内存结构”表示有疑问或不解的,先参考: http://blog.csdn.net/guogangj/archive/2007/05/25/1625199.aspx, 本文使用的表示方法和V ...

  9. API经济产业

    技术大咖为我们铺好了前进道路,我们为什么还要敬而远之舍近索远呢?充分利用开源,利用API进行App有效整合. 为应用添加日志功能,Loggly; 为应用添加用户管理和身份认证模块,Stormpath; ...

  10. zlog

    zlog源码包下载地址https://github.com/HardySimpson/zlog zlog使用手册http://blog.csdn.net/yangzhenzhen/article/de ...