HTML5的画布元素使用Javaｓｃｒｉｐｔ在网页上绘制图像。画布是一个矩形区域，可以控制每个像素。画布有多种绘制路径、矩形、圆形、字符和添加图像的方法。
画布一般指的是画布，最近使用HTML5编写的游戏更感兴趣，所以简单使用了画布。
帆布上接触使用Silverlight和WPF和Silverlight，画布是一个在任何控制绝对定位的容器。我们可以建立画布、图形应用、GIS应用，等等。
在HTML5中，画布是一个附加的标签：
复制代码代码如下所示：
他拥有基本HTML标记的所有属性，并且可以为他设置样式。
复制代码代码如下所示：
帆布{宽度：400px；身高：400px；背景：# 000；}
他还有一个特定的属性：
复制代码代码如下所示：
这里的高度和宽度不同于前面的HTML标记，也不同于风格的高度和宽度，主要是指画布的坐标范围，样式的宽度和高度是指画布实际显示的大小。
例如，定义以下画布中的一个：
复制代码代码如下所示：
然后，在画布上，画一个矩形的100, 50，大小为200, 150，你会看到实际效果如下图：
图中的画布的大小是600px * 450px确定的风格，但整个画布的坐标只有400×300，括号中的相应尺寸。
在画布上，绘画是基于坐标，所以100坐标和50转化为150px，75px的屏幕坐标和矩形的尺寸也从200×150转化为300px * 225px的屏幕尺寸。
你可以试试下面的代码。
复制代码代码如下所示：
VaR上下文= document.getelementsbytagname（画布）{ 0 }。getContext（2D）；
（10050200150）context.fillrect；
画布还有其他一些尚未被看到的属性。他有另一个主要方法，其getContext（）。这种方法是获取绘图对象。
通过对画布的DOM对象，你可以调用getContext（2D）的方法来获得相应的图形对象：
VaR的画布document.getelementsbytagname（画布）{ 0 }；
VaR上下文= canvas.getcontext（2D）；
这drawing2d的属性和方法可以在开发者控制台看到：
包含属性填充颜色，stokestyle和字体，线帽刷类，用，strokerect，调用，或者，线，closepath、中风、填充、绘制图像和其他绘图操作，还有一些如变换等方法，节约。
简单地说一些我见过的属性和方法，其他的需要自己去发现。
填充颜色：填充方式，可以是HTML代码如红的颜色值：# FF0000，其他的都不支持CSS3属性不知道
StrokeStyle: line style
字体：字体样式
用：功能（x，y，宽度，高度），填充矩形的填充颜色直接
StrokeRect：（x，y，函数的宽度，高度），绘制一个矩形边缘直接由strokeStyle
创建一个路径：开始画线，用线将 closepath画线或多边形等。
MoveTo：（x，y）函数移动的线的起点到一个新的坐标
LineTo：（x，y）函数从当前目标点
closepath：从当前点到起点
行程：按照上面的路径通过strokeStyle画折线
补：按上述路径的填充颜色绘制一个矩形
DrawImage：函数（图像，X，Y，宽度，高度）是在画布上添加到图像中的对象。注意，这里的图像对象必须加载。VAR img =新形象（测试。png）；IMG SRC =；=功能。img.onload（{ / *）在这里添加图像到画布上*