HTML5 Canvas元素教程
gooood个人博客网站
canvas
HTML5 Canvas元素是一个类似于<div>,<a>或<table>标记的HTML标记,但其内容是使用JavaScript呈现的。 为了利用HTML5 Canvas,我们需要将canvas标签放在HTML文档中的某个位置,使用JavaScript访问canvas标签,创建上下文,然后利用HTML5 Canvas API绘制可视化。
使用画布时,了解画布元素和画布上下文之间的区别非常重要,因为人们经常会混淆这些。 canvas元素是嵌入在HTML页面中的实际DOM节点。 画布上下文是一个具有属性和方法的对象,可用于在canvas元素内呈现图形。 上下文可以是2d或webgl(3d)。
每个canvas元素只能有一个上下文。 如果我们多次使用getContext()方法,它将返回对同一上下文对象的引用。
示例代码:
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // do cool things with the context context.font = '40pt Calibri'; context.fillStyle = 'blue'; context.fillText('Hello World!', 150, 100); </script> </body> </html>