首页 > 代码库 > html5 Canvas处理图像 实例讲解
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="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处理图像 实例讲解
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。