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 server数据库区分大小写设置
数据库表中字段alter Table TableName 区分大小写 ALTER Column ColumnName VARCHAR(50) COLLATE Chinese_PRC_CS_AS不区分大 ...
- asp.net遍历页面中所有TextBox，并赋值为String.Empty的方法
本文介绍下,如何用.net遍历页面中的所有TextBox控件,并赋值为string.empty的方法,通过实例学习具体操作.有需要的朋友可以参考下. 一.遍历窗体控件 1,普通页面遍历TextBo ...
- Eclipse MyEclipse 复制项目 复制现有项目 复制功能相似项目
如果现在已经存在一个Java Web项目 ProjectA,现在想做另外一个项目,里面绝大部分功能和结构都可以复用,如果想通过复制的方法来,那么可以这么做: 1.到资源管理器中,将ProjectA文件 ...
- 模拟Spring依赖注入
通过读取xml文件,利用反射动态加载类和方法,其实就是spring的注入机制模拟,可以清晰的看出整个运行流程 1.配置文件 applicationContext.xml <beans> & ...
- XML新手入门 创建构造良好的XML(1)
XML新手入门 创建构造良好的XML(1) 2009-03-19 09:24 Kay Whatley IBM Developerworks 我要评论(0) 字号:T | T 本文描述了构建良好的XML ...
- jquery判断客户端的类型
针对不同客户端下载链接的页面响应样式不一样,更人性点而已 //匹配客户端类型 var isAndroid = navigator.userAgent.toLowerCase().match(/andr ...
- SQL Server 为索引启动硬件加速（分区）的 2 方法
背景知识: 如果你想看<三国>这部电视剧它有 假设它有400G这么大,现在你有两个朋友他们都已经把这部剧保存在自己的硬盘上了. A用一个硬盘就把这部剧保存了下来,B用了两个硬盘才保存了一下 ...
- 【JavaScript】Object.prototype.toString.call()进行类型判断
权声明:本文为博主原创文章,未经博主允许不得转载. op = Object.prototype, ostring = op.toString, ... function isFunction(it) ...
- git 拉取远程分之到本地
git checkout -b newbranch_name --track origin/feature/newbranch_name 如果遇到类似: fatal: git checkout: up ...
- Checkbutton 和 Radiobutton
The Checkbutton widget is used to display a number of options to a user as toggle buttons. The user ...