最近在学习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. iOS 使用NJKWebViewProgress做webview进度条

    NJKWebViewProgress地址:https://github.com/ninjinkun/NJKWebViewProgress 导入头文件 #import "NJKWebViewP ...

  2. ThreadPoolExecutor（转）

    让ThreadPoolExecutor的workQueue占满时自动阻塞submit()方法 By learnhard | 2015 年 09 月 04 日 0 Comment 转载请注明出处:htt ...

  3. QT-利用C++仿制windown自带的记事本程序V1.0

    下班无事, 发现QT还是很好用的, 就仿制windows的记事本做了一个,未彻底DEBUG, 先拿来分享下. windows记事本大概是这样的: 大概分为以下几步: 1. 界面用QT代码写,即可, Q ...

  4. STM32的例程GPIO的汇编指令初探

    任务一:寻找main函数的汇编指令集 任务二:寻找main函数中的SystemClock_Config函数的汇编指令集 寻找main函数的汇编指令集 运行例程中GPIO工程时,总会加载startup_ ...

  5. 班上有学生若干名，已知每名学生的成绩（整数），求班上所有学生的平均成绩，保留到小数点后两位。同时输出该平均成绩整数部分四舍五入后的数值。 第一行有一个整数n（1<= n <= 100），表示学生的人数。其后n行每行有1个整数，表示每个学生的成绩，取值在int范围内。

    #include<iostream> #include<iomanip> using namespace std ; int main() { int n; while(cin ...

  6. 获取mssqlserver与access数据库插入的当前行的id

    //mssqlserver public static int GetInsertId(string sql) { try { SqlCommand cmd = new SqlCommand(); u ...

  7. jquery判断客户端的类型

    针对不同客户端下载链接的页面响应样式不一样,更人性点而已 //匹配客户端类型 var isAndroid = navigator.userAgent.toLowerCase().match(/andr ...

  8. 1001 A + B Problem

    基本输入输出函数 #include <stdio.h> int main(){ int a,b; ){ printf("%d\n",a+b); } ; }

  9. 关于C#的一点小知识 以后自己用

    项目过程中遇到C#代码的编写 上网查之后的结果 @html.ActionLink的几种参数格式 一 Html.ActionLink("linkText","actionN ...

  10. listview加载网络图片

    ListView加载网络数据和图片 2013-09-25 00:08:10|  分类: 默认分类 |  标签:android  |举报|字号 订阅     如,从服务器端获得商品名称.价格.简介和图片 ...