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

最新推荐文章于 2022-09-23 21:58:59 发布

子循

最新推荐文章于 2022-09-23 21:58:59 发布

阅读量1.2w

点赞数 1

本文链接：https://blog.csdn.net/Tsangyang/article/details/8204588

版权

Html5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Canvas

4 篇文章 0 订阅

订阅专栏

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).

子循

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html5 Canvas开发之清除一个特定区域内的Canvas、宽高技巧、使Canvas填充整个浏览器窗口

1.清除一个特定区域内的Canvascontext.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);
复制链接

扫一扫