HTML5的学习之canvas画布
前面几篇博客我们一直在讲如何使用canvas绘制一下图片,但是没有讲过canvas如何使用,都有哪些属性,方法等。今天我们就来讲一讲canvas的有关属性和方法。
HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。
元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
接下来我们来学习一下这个对象的属性和方法,用于在画布上绘制文本、线条、矩形、圆形等等。
HTML代码:
<canvasid="my_canvas"></canvas>
JS代码:
// 画布默认 宽300px 高150px // 获取元素varoCanvas=document.getElementById("my_canvas"); // 改变canvas默认的宽高oCanvas.width="1000"; oCanvas.height="1000"; // getContext() 返回对象 2d环境varmyCanvas=oCanvas.getContext("2d");
注意:canvas画布的默认宽高是300px*150px,所以我们在使用canvas画布时一定要设置画布的宽高。