Html5 Canvas开发之清除一个特定区域内的Canvas、宽高技巧、使Ca_H5之家

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