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()函数上添加,美化也 ...
随机推荐
- JQ 事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 认识Java数组（一）
特别想喜欢一个寓言故事: 噢,它明白了,河水既没有牛伯伯说的那么浅,也没有小松鼠说的那么深,只有自己亲自试过才知道!道听途说永远只能看到表面现象,只有亲自试过了,才知道它的深浅!!!!! 言归正传: ...
- tab标签切换（无炫效果，简单的显示隐藏）
从最简单的效果开始写起,一个简单的JQ写出tab切换效果,很静态,没有任何的轮转特效,单纯的点击标签显示区域块. 附上代码: HTML: <div class="wrapper&quo ...
- ORACLE PL/SQL开发--bulk collect的用法 .
刚刚在inthirties老大的博客里看到这篇文章,写的不错,正好自己最近在学习PL/SQL,转过来学习学习. ============================================ ...
- More is better--hdu1856（并查集）
More is better Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 327680/102400 K (Java/Others) ...
- 正三角形的外接圆面积,nyoj-274
正三角形的外接圆面积 时间限制:1000 ms | 内存限制:65535 KB 难度:0 描述给你正三角形的边长,pi=3.1415926 ,求正三角形的外接圆面积. 输入 只有一组测试数据 ...
- 混合使用Azure LB和ILB访问相同web服务（1）
在经典的使用场景中,我们一般使用AzureLoadBalancer来面向公网提供负载均衡服务,而使用Azure Internal Load Balancer提供内部那些不愿意将服务暴露给公网的服务,比 ...
- IDEA12 KeyGen Download List
When you use IDEA to develop Java, you can use the following file to generate lincese. Because CNBlo ...
- haproxy ssl相关配置
ssl-default-bind-options [<option>]... This setting is only available when support for OpenSSL ...
- Uber上海公司被司机打上门
“Uber上周的工资没有到账,司机们都急了.”9月13日,<IT时报>记者接到Uber司机爆料,称Uber(优步)拖欠工资,客服给的解释是银行系统对接问题,但多名司机赶往Uber上海公司咨 ...