html5 canvas学习--操作与使用图像

// 1.创建image对象

var img = new Image();

// 2.设定image对象的onload属性

img.onload = function(){

}

// 3.绘制图像

context.drawImage(image,x,y);

context.drawImage(image,x,y,width,height);

context.drawImage(image,x,y,sWidth,sHeight,dx,dy,dWidth,dHeight);// sWidth和sHeight是剪裁下来的宽度和高度,dx和dy为裁剪后图片放置的位置,dWidth和dHeight为显示图片的大小.

一.绘制图片并改变图片的大小

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			var img = new Image();
			img.onload = function(){
				ctx.drawImage(img,0,0,100,100);
				ctx.font = "italic 60px Arial Black";
				ctx.shadowOffsetX = 3;
				ctx.shadowOffsetY = 3;
				ctx.shadowBlur = 2;
				ctx.shadowColor = "rgba(0,0,0,0.7)";
				ctx.fillStyle = "Green";
				ctx.fillText("javascript !",50,165);
			}
			img.src = "1.ico";
		}
		window.onload = function(){
			draw();
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="600" height="200"></canvas>
</body>
</html>

二.裁切图片

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			var img = new Image();
			img.onload = function(){
				ctx.drawImage(img,0,0);
				ctx.drawImage(img,10,10,100,100,0,0,100,100);
			}
			img.src = "logo.png";
		}
		window.onload = function(){
			draw();
		}
	</script>
</head>
<body>
	<canvas id="myCanvas" width="1200" height="600"></canvas>
</body>
</html>



阅读更多
个人分类: Html5
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭