HTML5的学习之canvas画布(一)

HTML5的学习之canvas画布

前面几篇博客我们一直在讲如何使用canvas绘制一下图片，但是没有讲过canvas如何使用，都有哪些属性，方法等。今天我们就来讲一讲canvas的有关属性和方法。

• HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。
• 元素本身并没有绘制能力（它仅仅是图形的容器），必须使用脚本来完成实际的绘图任务。
• getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
  接下来我们来学习一下这个对象的属性和方法，用于在画布上绘制文本、线条、矩形、圆形等等。

HTML代码：

    <canvas id="my_canvas"></canvas>

JS代码：

    // 画布默认 宽300px 高150px 

    // 获取元素
    var oCanvas=document.getElementById("my_canvas");
    // 改变canvas默认的宽高
    oCanvas.width="1000";
    oCanvas.height="1000";
    
    // getContext() 返回对象  2d环境
    var myCanvas=oCanvas.getContext("2d");

注意：canvas画布的默认宽高是300px*150px,所以我们在使用canvas画布时一定要设置画布的宽高。