· 一个页面可以有多个画布,但是要为每个画布指定唯一的ID
· 默认情况下,画布是透明的
在画布上绘图
接下来我们开始在画布上绘制一个矩形。要画这个矩形,首先要确定矩形的位置,其次是矩形的大小。这里把矩形画在X = 10像素,Y = 10像素的位置,让它的高度和宽度都等于100像素。
· 1.首先获得画布元素的引用
· 2.获取画布的一个“2D”上下文
· 3.使用这个上下文莱绘制图像
<!DOCTYPE HTML>
<html>
<head>
<title>Look what I Drew</title>
<meta charset="utf-8">
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
window.onload = function () {
//在画布上画个矩形
var canvas = document.getElementById('draw');
var context = canvas.getContext("2d");
context.fillRect(10,10,100,100);
};
</script>
</head>
<body>
<canvas id="draw" width="600" height="200"></canvas>
</body>
</html>
因为画布是HTML5中新增的特性,所以会遇到有些浏览器不支持的情况,这是我们就需要查看画布对象中是否存在的getContext方法:
<script>
window.onload = function () {
//在画布上画个矩形
var canvas = document.getElementById('draw');
//判断浏览器是否支持Canvas
if (canvas.getContext) {
console.info("you hava canvas");
var context = canvas.getContext("2d");
context.fillRect(10,10,100,100);
} else {
console.info("soory, no canvas support ApI");
}
};
</script>
此外我们还可以这样做:
<canvas id="draw" width="600" height="200">Please upgrade your browser!</canvas>
只要浏览器看到不认识的元素,默认行为就显示其中包含的文本。所以,不支持帆布浏览的器看到<canvas>元素时,它们就会显示请升级浏览器!另一方面,支持画布的浏览器会直接忽略画布标记之间的所有文本,所以不会显示这个文本。