HTML5之帆布（canvas）（二）

时间 2019-11-13

标签 html5 html 帆布 canvas 栏目 HTML5 繁體版

原文原文链接

· 一个页面能够有多个画布，可是要为每一个画布指定惟一的IDhtml

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

在画布上绘图浏览器

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

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

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

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

<!DOCTYPE HTML>blog

<html>ip

<head>utf-8

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