当前访客身份:游客 [ 登录  | 注册加入尚学堂]
直播
新闻资讯

十分钟搞定_HTML5_图片图像处理

三叉戟 发表于 1年前  | 评论(20 )| 阅读次数(10229 )|   4 人收藏此文章,   我要收藏
摘要 带你十分钟搞定图片图形处理,为以后使用HTML5开发应用、开发游戏打下基础。

在线播放



canva画布介绍  

 <canvas>

    <canvas id="myCanvas" width="300" height="300" style="border:solid 1px red;"></canvas>

context对象介绍

        通过js操作canvas

var ctx = document.getElementById('myCanvas').getContext('2d');

理解要点:

context 绘图上下文,一个左上角为( 0,0 )的笛卡尔坐标平面。 y 轴向下是增加, x 轴向右是增加

绘图都是在和canvas对象的context打交道

加载图片

var  c = document.getElementById('myCanvas');
var ctx =.getContext('2d');
var logoImg = new Image();
logoImg.src = "logo.gif";
ctx.drawImage(logoImg, 0, 0, 100, 100);


加载图片的一部分(选取的矩形区域)

var c = document.getElementById('myCanvas');

var ctx = c.getContext('2d');
var logoImg = new Image();
logoImg.src = "logo.gif";

ctx.drawImage(logoImg, 0, 0, 132, 50,80,80,100,50);


图片平铺处理


var c = document.getElementById('myCanvas');

var ctx = c.getContext('2d');
ctx.clearRect(0,0,300,300);//清空绘图区域
var img = new Image();
img.src = "images/Earth.jpg";

var ptrn = ctx.createPattern(img,"repeat-y"); ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 300, 300);

有四种平铺方式:no-repeat, repeat-x, repeat-y, repeat


图片裁剪、context状态保存和恢复


var  c = document.getElementById('myCanvas');
var ctx =.getContext('2d');

var logoImg = new Image();
logoImg.src = "aaa.jpg";

ctx.save();//保存当前context的状态、属性
ctx.beginPath();
ctx.arc(124, 83, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.clip();
ctx.drawImage(logoImg, 0, 0);
ctx.restore();//恢复到save时候context的状态、属性

本节课代码如下:

<!DOCTYPE HTML>
<html>
	<head>
		<title>HTML5图像处理</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript">
			function loadImage01() {
				//context是一个封装了很多绘图功能的对象.目前只提供2d画图,没有3d
				var ctx = document.getElementById('myCanvas').getContext('2d');
				var logoImg = new Image();
				logoImg.src = "logo.gif";
				ctx.drawImage(logoImg, 0, 0, 100, 100);
			}
			function loadImage02() {
				//context是一个封装了很多绘图功能的对象.目前只提供2d画图,没有3d
				var c = document.getElementById('myCanvas');
				var ctx = c.getContext('2d');
				var logoImg = new Image();
				logoImg.src = "logo.gif";
				ctx.drawImage(logoImg, 0, 0, 132, 50,80,80,100,50);
			}
			function loadImage03() {
				//context是一个封装了很多绘图功能的对象.目前只提供2d画图,没有3d
				var ctx = document.getElementById('myCanvas').getContext('2d');
				ctx.clearRect(0,0,300,300);		//清空绘图区域
				var img = new Image();
				img.src = "images/Earth.jpg";
	     		var ptrn = ctx.createPattern(img,"repeat");  //no-repeat,repeat-x,repeat-y,repeat
                ctx.fillStyle = ptrn;
                ctx.fillRect(0, 0, 300, 300);
			}
			
			function loadImage04() {
				//context是一个封装了很多绘图功能的对象.目前只提供2d画图,没有3d
				var ctx = document.getElementById('myCanvas').getContext('2d');
				ctx.clearRect(0,0,300,300);		//清空绘图区域
				
				var logoImg = new Image();
				logoImg.src = "aaa.jpg";
				
    	        ctx.save();
    	        
				ctx.beginPath();
	            ctx.arc(124, 83, 50, 0, Math.PI * 2, true);
    	        ctx.closePath();
    	        
        	    ctx.clip();
        	    ctx.drawImage(logoImg, 0, 0);
        	 //   ctx.restore();
        	    
        		 
			}
		</script>
	</head>
	<body>
		<h1>
			著名的canvas画布
		</h1>
		<input type=button value="加载图片" onclick="loadImage01();" />
		<input type=button value="选取图像的一部分矩形区域进行加载" onclick="loadImage02();" />
		<input type=button value="图像重复平铺" onclick="loadImage03();" />
		<input type=button value="图像裁剪" onclick="loadImage04();" />
		<br /><br /><br />
		<canvas id="myCanvas" width="300" height="300" style="border:solid 1px red;"></canvas>
	</body>
</html>
注:

    1. 请使用最新的浏览器版本。本代码测试:火狐33版本测试通过。

    2. 代码中涉及到的图片,请自己重新寻找。

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
声明:博客文章版权属于原创作者,受法律保护。如果侵犯了您的权利,请联系管理员,我们将及时删除!
(邮箱:webmaster#sxt.cn(#换为@))
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183