<canvas> 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形。例如:画图,合成照片,创建动画甚至实时视频处理与渲染。 WebGL使用<canvas>元素来用于网页上的3D图形硬件加速。 今天,我们使用canvas来画一个正方形,了解其基本用法。 首先新建一个html文件:
<!doctype html>
<html lang="en">
<head>
<title>Canvas 的 HelloWorld</title>
</head>
<body>
</body>
</html>
canvas英语里面就是画布的意思,我们作画之前先把画布放到网页里面:
<canvas id="canvas"></canvas>
画布算是放好了,id属性可以让我们在后面的JavaScript代码中选择引用该元素(这里就是canvas画布)。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}
有样式的文本 在上面的例子用我们已经使用了 font 来使文本比默认尺寸大一些. 还有更多的属性可以让你改变canvas显示文本的方式:
当你需要获得更多的文本细节时,下面的方法可以给你测量文本的方法。
measureText() 将返回一个 TextMetrics对象的宽度、所在像素,这些体现文本特性的属性。 下面的代码段将展示如何测量文本来获得它的宽度:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}
这里我们通过在canvas上写字对HTML5的canvas有一个初步印象。一般来说就是放置画布(canvas),获取上下文(2D或WebGL),渲染输出三个大的方向。