HTML5之帆布（canvas）（二）

来源：互联网发布：大数据新闻案例分析编辑：程序博客网时间：2024/06/11 01:01

· 一个页面可以有多个画布，但是要为每个画布指定唯一的ID

· 默认情况下，画布是透明的

在画布上绘图

接下来我们开始在画布上绘制一个矩形。要画这个矩形，首先要确定矩形的位置，其次是矩形的大小。这里把矩形画在X = 10像素，Y = 10像素的位置，让它的高度和宽度都等于100像素。

· 1.首先获得画布元素的引用

· 2.获取画布的一个“2D”上下文

· 3.使用这个上下文莱绘制图像

<!DOCTYPE HTML>

<html>

<head>

<style>

canvas{

border: 1px solid black;

}

</style>

window.onload = function () {

//在画布上画个矩形

var canvas = document.getElementById('draw');

var context = canvas.getContext("2d");

context.fillRect(10,10,100,100);

};

</script>

</head>

<body>

</body>

</html>

失败处理

因为画布是HTML5中新增的特性，所以会遇到有些浏览器不支持的情况，这是我们就需要查看画布对象中是否存在的getContext方法：

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>元素时，它们就会显示请升级浏览器！另一方面，支持画布的浏览器会直接忽略画布标记之间的所有文本，所以不会显示这个文本。

0 0