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.
3.
使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。
2.
changing the width and height will reset the canvas, so everything has to be redrawn).