HTML5利用Canvas绘制图形(使用图像、裁剪区域、使用文本。阴影效果和操作像素)

最新推荐文章于 2024-06-21 18:17:37 发布

D灿

最新推荐文章于 2024-06-21 18:17:37 发布

阅读量3.3k

点赞数 1

分类专栏： HTML网页编程 Web前端技术文章标签： html5 网页 Canvas

本文链接：https://blog.csdn.net/zuosixiaonengshou/article/details/72668966

版权

本文详细介绍了HTML5 Canvas的高级技巧，包括如何使用图像、设定裁剪区域、添加文本以及应用阴影效果。在图像绘制中，阐述了裁剪方法clip()的应用，以及如何通过save()和restore()控制裁剪区域。此外，还探讨了在Canvas上绘制和设置文本样式的方法。同时，文章讲解了Canvas的阴影效果，使图形更具立体感。最后，讨论了像素级操作，如createImageData()、getImageData()和putImageData()，用于直接操作底层像素数据。

摘要由CSDN通过智能技术生成

使用图像

在canvas中插入图像

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function Draw(){
				//使用三种方式插入图像
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				var newImg=new Image(); //使用Image()构造函数创建图像对象
				newImg.src="../img/3.jpg";
				newImg.οnlοad=function(){
					//从左上角开始绘制图像
					context.drawImage(newImg,0,0); 
					 //从指定坐标开始绘制图像，并设置图像宽和高 指定这些参数可以使得图像可以缩放
					context.drawImage(newImg,250,100,150,200);
					//裁剪一部分图像放在左上角，并稍微放大
					context.drawImage(newImg,90,80,100,100,0,0,120,120); 
				}
			}	
			window.addEventListener("load",Draw,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能!</canvas>
	</body>
</html>

三种方法插入图片的效果

裁剪区域

在路径绘图中，我们使用了两大绘图方法，即用于绘制线条的 stroke()方法和用于填充区域的fill()方法。关于路径的处理，还用一种方法叫做裁剪方法clip()。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>裁剪区域</title>
		<script type="text/javascript">
			function Draw(){
				//使用裁剪区域绘图
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				var newImg=new Image(); //使用Image()构造函数创建图像对象
				newImg.src="../img/3.jpg"