canvas
是html5新增的标签,是个图形容器。允许javascript在其区域内进行绘制。其它大小由width和height决定。
canvas的创建
<canvas id="canvas" width=800; height=600></canvas>;
canvas标签只有width和height两个属性,在没有设置它们的情况下,canvas默认大小为300X150。同时,如果用css来设置canvas的大小会出问题,推荐直接在canvas标签里设置大小或者通过JavaScript来设置大小。
canvas能做什么?
- 动画
- 图形
- 游戏
- 字体
获得上下文
canvas只有获得上下文之后,才能在它的上面绘画。getContext()
方法就是来获取上下文和绘画功能的。getContext()
只有一个参数,就是上下文的格式。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext(‘2d‘);
清空画布的方法
1.重设canvas的高度或者宽度:
由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空
function clearCanvas(){
var canvas = document.getElementById("canvas");
canvas.height=canvas.height;
}
2.使用clearRect方法:
function clearCanvas(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height);
}
3.可以用某一特定的颜色填充画布,从而到达清空的目的:
function clearCanvas()
{
var canvas=document.getElementById("Canvas");
var ctx= canvas.getContext("2d");
cxt.fillStyle="#000000";
cxt.beginPath();
cxt.fillRect(0,0,c.width,c.height);
cxt.closePath();
}
检查浏览器是否支持
最新版的 FireFox,Safari,Chrome 和 Opera 都支持 HTML5 canvas,但是 IE8及以下都不支持canvas。下面的代码用于检测浏览器的是否支持canvas
var canvas = document.getElementById("canvas");
if (canvas.getContext){
var ctx = canvas.getContext(‘2d‘);
// 支持
} else {
// 不支持
}