最近在学习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. pl sql练习（3）

    1.s树形结构查询表中的数据:比如emp表中每个员工都有自己的头,即公司中的职位是按层次划分的,类似一个树,因此有时需要按层次显示查询的结果. select empno,mgr,ename,job f ...

  2. iOS开发面试题整理 （一）

    1. Object-C有多继承吗?没有的话用什么代替? cocoa 中所有的类都是NSObject 的子类多继承在这里是用protocol 委托代理 来实现的 你不用去考虑繁琐的多继承 ,虚基类的概念 ...

  3. 克隆虚拟机后修改MAC地址

    克隆后的主机找不到eth0 修改 /etc/udev/rules.d/70-persistent-net.rules 删除原eth0的信息,将eth1的name改为eth0 修改 /etc/sysco ...

  4. 在windows下安装mysql

    本文主要讲mysql解压版在windows下的安装和配置,在官网http://www.mysql.com/下载mysql-cluster-gpl-7.3.7-winx64.zip,然后将mysql解压 ...

  5. UVA 12657 Boxes in a Line

    双向链表 注意:如果算法是最后处理翻转情况时,注意指令4翻转后1,2两个指令也要翻转处理: 指令3 中交换盒子要注意两个盒子相邻的情况 #include <iostream> #inclu ...

  6. C# 几种常见的排序方法

    1.冒泡排序 //冒泡排序 public void BubbleSort(int[] list) { int i, j, temp; bool done = false; j = ; while (( ...

  7. 一个AVRUSB作品HID类

    最近为了HID类设备弄了半个把月.终于完成这个无线(红外)多媒体键盘,带鼠标功能.难就难在描述符上,不过在近4天的资料翻阅及多次的测试下,电脑不知道重启了多少次啊,的情况下 搞定了这个东西,大家可以看 ...

  8. Delphi通过GetFileVersionInfo和VerQueryValue等API函数取得详细EXE信息

    This has been described at About: http://delphi.about.com/cs/adptips2001/a/bltip0701_4.htmBasically, ...

  9. JavaScript声音播放

    方式一: /** * 播放音频(Chrome.opera)支持 * @param file:支持 rm,mid,wav */ function playAudio(file) { var embed= ...

  10. Create local metadata resource of yum

    Today, I need install an oracle software for a machine whose os is Linux. As we all know, installing ...