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

最新推荐文章于 2022-10-19 20:08:11 发布

xiaopengyaonixi

最新推荐文章于 2022-10-19 20:08:11 发布

阅读量1.9k

点赞数

分类专栏： Html5

Html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

// 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>

xiaopengyaonixi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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(im
复制链接

扫一扫