<canvas.../>元素是HTML5新增的绘图元素,本身功能有限但是可以通过它获取一个CanvasRenderingContext2D对象,该对象是个强大的绘图API。控制该对象绘图需要使用Java Script。
canvas就像一张画纸本身并没有什么功能,常用的属性就是height和width来设置画纸的宽和高,要想绘图需要三步:
- 获取<canvas.../>元素的DOM对象Canvas
- 调用Canvas的getContext()方法获取CanvasRenderingContext2D对象
- 调用CanvasRenderingContext2D对象的丰富方法绘图
基本代码如下:
<body>
<h2>canvas绘图</h2>
<canvas id="mc" width="500" height="400" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('mc');
var ctx=canvas.getContext('2d');
//ctx.各种绘图方法();
</script>
</body>
关于CanvasRenderingContext2D对象的细节和方法感兴趣可以打开下面的网页: