canvas图形绘制

创建canvas元素

 

<canvas width="640" height="480" id="testcanvas" style="border:1px solid #000">

我们创建了一个Html5 canvas标记

</canvas>

如上代码,我们创建了一个宽640px 高480px的canvas元素,我们给元素加了一个1px的边框,我们可以使用JavaScript在这个矩形区域中画东西。

注: 不支持canvas的浏览器会直接忽视<canvas>标记,将标签内的内容显示出来。

我们用最基本的绘图环境在canvas中绘制图像,通过调用canvas对象的getContext()方法获取绘图环境。getContext()方法只需要一个参数:绘图环境的类型。在游戏中,我们使用2D类型的绘图环境。

获取canvas绘图环境
<script type="text/javascript" charst="utf-8">
      //获取canvas对象的引用
      var canvas = document.getElementById('testcanvas');
      //获取该canvas的2D绘图环境
      var context = canvas.getContext('2D');
      //下面是绘图的代码
      ... ...
</script>

绘图环境对象提供了大量的方法,用来在屏幕上绘制我们游戏中的内容。这些方法包括: