html5 Canvas处理图像实例讲解

最近在学习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处理图像实例讲解的更多相关文章

HTML5 canvas globalCompositeOperation绘图类型讲解
我们总是将一个图形画在另一个之上,大多数情况下,这样是不够的.比如说,它这样受制于图形的绘制顺序.不过,我们可以利用 globalCompositeOperation 属性来改变这些做法.global ...
使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
HTML5 Canvas arc()函数//////////////////////(转)
HTML5 Canvas arc()函数实例创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...
Html5 Canvas 实现滚动的图片
今天一直在找html5 canvas的使用实例.想画一张地图,再画个小车在上面跑.运气好找到了一个大神写的js代码.该代码实现了图片的左右来回滚动,现在粘贴在博客里记录一下: <html> ...
HTML5 Canvas图片操作简单实例1
1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...
HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)
详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...
html5 canvas用动画的形式装载图像
本示例使用HTML5 canvas,简单的编写了装载图片效果, 请使用支持HTML5的浏览器预览效果: 下图为以逐渐横向栅格的效果图 html部分: <!DOCTYPE html> < ...
HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
html5 canvas 圆形抽奖的实例
年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...

随机推荐

表设计与SQL优化
1. 说说分区表的主要好处是什么,为什么会有这些好处. 分区功能能够将表.索引或索引组织表进一步细分为段,这些数据库对象的段叫做分区.每个分区有自己的名称,还可以选择自己的存储特性. 从数据库管理员的 ...
android学习—should use @string resource警告
在布局文件中,文本的设置使用如下写法时会有警告:Hardcoded string "BUTTON", should use @string resource <Button ...
RecyclerView不同类型Item的展示
代码如下: public class AccessoiresAdapter extends RecyclerView.Adapter { final int VIEW_TYPE_ACCESSORY = ...
mysql各种日志对应的配置项
01.error_log --log-error=<file_name> 02.general_log --general-log-file=<file_name> --gen ...
SQL Server 备份的 8 种方法。
方法 1. 完整备份方法 2. 差异备份方法 3. 部分备份(备份数据库的read_write部分) 方法 4. 文件备份方法 5. 文件组备份方法 6. 只复制备份方法 7. 日志备份 - ...
API接口测试01理论
定义接口测试是系统组件间及多个系统之间的测试如:app与Server间如何进行数据交换,传递意义确保主要流程及系统的稳定性将BUG控制在项目前期缩短产品的研发周期检查服务器的异常处理能力 ...
博客终于开通了happy
HelloWorld! 在我不懈的申请下,我的博客终于在第4次申请后成功开通了! 作为一个毕业两年的码农,现在才开始想要记录一些东西,似乎有点晚 -_-! 希望多年以后可以在这看到我长长的足迹!
Delphi利用Webbrowser登陆QQ群文档
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
C++利用指针突破私有成员访问限制
C++ 面向对象的一大特性就是封装,使用不同的访问控制符来控制外接对其的访问权限.比如: 1 class A 2 { 3 public: 4 A(): i(10){} 5 void print(){ ...
Unix/Linux环境C编程入门教程(24) MySQL 5.7.4 for Red Hat Enterprise 7（RHEL7）的安装
远观历史, MySQL的主要目的是为了能够在单处理器核心的商业服务器上运行.如今MySQL的一个变化用户可能不会注意到,那就是甲骨文已经开始重新架构MySQL的代码,使它大量的模块化.如软件解析器,优 ...

html5 Canvas处理图像 实例讲解

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

随机推荐

热门专题

html5 Canvas处理图像实例讲解

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