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()函数上添加,美化也 ...
随机推荐
- RTUILabel+正则表达式
RTLabel和RegexKitLite都要导入第三方库 使用Regexkitlite库进行正则表达式的解析 1.库是使用MRR,如果在ARC工程里面使用这个类,必须在project->buil ...
- S - 骨牌铺方格（第二季水）
Description 在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格,输入n ,输出铺放方案的总数. 例如n=3时,为2× 3方格,骨牌的铺放方案有三种, ...
- Scrapy安装问题
按照说明直接使用pip install scrapy会有两个问题: fatal error: 'ffi.h' file not found fatal error: 'libxml/xmlversio ...
- 从setTimeout到浏览器线程机制
看高性能javascipt 这本书时,看到这么一句话: Putting scripts at the top of the page in this way typically leads to a ...
- android widget->progressbar
其中的indeterminteDrawable属性就是用来设置进度条颜色等属性的
- 映射 SQL 和 Java 类型
http://alex2009.blog.51cto.com/749524/272942 AJAX: http://www.w3school.com.cn/jquery/ajax_ajax.asp h ...
- Arduino红外遥控系列教程2013——红外转码
教程三:红外转码教程——用电视遥控器取代机顶盒遥控器 前言前段时间看到了使用红外遥控的X-Bot机器人[链接],感觉很有意思.最近开始玩Arduino与红外,一方面打算将来用于BOXZ的之间的通讯控制 ...
- Unix/Linux环境C编程入门教程(30) 字符串操作那些事儿
函数介绍 rindex(查找字符串中最后一个出现的指定字符) 相关函数 index,memchr,strchr,strrchr 表头文件 #include<string.h> 定义函数 c ...
- 线性表的Java实现
一.概念 对于常用的数据结构,可分为线性结构和非线性结构,线性结构主要是线性表,非线性结构主要是数和图.当n>0时,表可表示为:(a0,a1,a2,a3,…an) 1. 线性表的特征: 1.存在 ...
- poj 1276 Cash Machine_多重背包
题意:略 多重背包 #include <iostream> #include<cstring> #include<cstdio> using namespace s ...