Html5 Canvas开发之清除一个特定区域内的Canvas、宽高技巧、使Canvas填充整个浏览器窗口

最新推荐文章于 2026-05-05 12:44:09 发布

原创最新推荐文章于 2026-05-05 12:44:09 发布 · 1.2w 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#canvas #html5 #HTML5

Html5 同时被 2 个专栏收录

4 篇文章

订阅专栏

Canvas

4 篇文章

订阅专栏

本文介绍如何使用Canvas进行图像绘制及布局调整，包括清除特定区域、使用技巧调整宽度和高度、以及使Canvas填充整个浏览器窗口的方法。

1.清除一个特定区域内的Canvas

context.fillRect(40, 40, 100, 100);
context.beginPath();
context.arc(230, 90, 50, 0, Math.PI*2, false);
context.closePath();
context.fill();
context.clearRect(230, 90, 50, 50);

2.宽高技巧

context.fillStyle = "rgb(255, 0, 0)";
context.fillRect(40, 40, 100, 100);
context.beginPath();
context.arc(230, 90, 50, 0, Math.PI*2, false);
context.closePath();
context.fill();
canvas.attr("width", canvas.width());
canvas.attr("height", canvas.height());
context.fillRect(40, 40, 100, 100);

注意：

The downside with the width/height trick isthat absolutely everything in the canvas is reset, includingstyles and colors.This is why you should only use this trick if you!re prepared to completelyreset the canvas, not just wipe the display clean.

使Canvas填充整个浏览器窗口

<!DOCTYPE html>

<html>
	<head>
		<title>Learning the basics of canvas</title>
		<meta charset="utf-8">
		
		<link href="canvas.css" rel="stylesheet" type="text/css">
		
		<script type="text/javascript" src="jquery.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function() {	
				var canvas = $("#myCanvas");
				var context = canvas.get(0).getContext("2d");
				
				$(window).resize(resizeCanvas);
				
				function resizeCanvas() {
					canvas.attr("width", $(window).get(0).innerWidth);
					canvas.attr("height", $(window).get(0).innerHeight);
					context.fillRect(0, 0, canvas.width(), canvas.height());
				};
				
				resizeCanvas();
			});
		</script>
	</head>
	
	<body>
		<canvas id="myCanvas" width="500" height="500">
			<!-- Insert fallback content here -->
		</canvas>
	</body>
</html>

* { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
canvas { display: block; }

注意点：1.

If only jQuery had a resize method that was fired at the moment a browser window was resized。

changing the width and height will reset the canvas, so everything has to be redrawn).