HTML5 Canvas元素是一个HTML标签类似于< div >,< >,或者<table>标记,除其内容与JavaScript渲染。为了利用HTML5画布,我们需要把画布标记HTML文档内的某个地方,访问帆布与JavaScript标记,创建一个上下文,然后利用HTML5 Canvas API来绘制可视化。
使用画布时,重要的是要理解帆布画布元素和背景之间的差异,通常人们把这些困惑。画布元素实际嵌入到HTML页面的DOM节点。画布上下文对象的属性和方法,您可以使用图形呈现在画布元素。上下文可以2 d或webgl(3 d)。
使用画布时,重要的是要理解帆布画布元素和背景之间的差异,通常人们把这些困惑。画布元素实际嵌入到HTML页面的DOM节点。画布上下文对象的属性和方法,您可以使用图形呈现在画布元素。上下文可以2 d或webgl(3 d)。
每个画布元素只能有一个上下文。如果我们使用多次getContext()方法,它将返回一个引用相同的上下文对象。
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// do stuff here
</script>
</body>