HTML5 Canvas(画布)

canvas是HTML5中的新元素，使用它我们就可以在页面上绘制图像了。

<canvas>标签定义的只是图形的容器或者说只是一块空白的画布。图形的具体绘制通常是通过JavaScript完成。

创建画布（Canvas）

width 和 height 属性定义的画布的大小。添加id是为了方便获取画布对应的这个DOM对象。

xxxxxxxxxx
<canvas id="myCanvas" width="200" height="100"></canvas>

使用JavaScript绘制图像

1. 获取画布

   xxxxxxxxxx
   var c=document.getElementById("myCanvas");
   //获取<canvas>DOM
   

2. 获取context

   xxxxxxxxxx
   var ctx=c.getContext("2d");
   //生成的上下文对象里面包含多种绘制图形的方法
   

理解Canvas（画布）坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

实时效果反馈

1.下列描述错误的是：

A 在html中写<canvas></canvas>创建画布

B 在html中写<canvas></canvas>创建图形

答案

1=>B