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填充整个浏览器窗口
Learning the basics of canvas$(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();
});
* { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
canvas { display: block; }
注意点:1.
If only jQuery had a resizemethod 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).