它只是一个绘图容器，除了id、类、样式等属性外，还有高度和宽度属性。主要有三个步骤来绘制：
1。获取与元素对应的DOM对象，这是一个画布对象；
2。getContext（）的画布上的对象的方法调用，并得到canvasrenderingcontext2d对象。
三.invokes the CanvasRenderingContext2D object for drawing.
线的性质
除了上面所使用的线宽属性之外，行还具有以下属性：
公牛；的线帽属性设置或返回线的线帽样式，可以为以下值：
butt添加一条边每行的结尾（默认）；
round添加一个圆帽，每行的结尾；
square加方帽，每行的结尾。
公牛；该线连接属性设置或返回类型创建的边缘时，两线交汇，你可以采取以下的值：
miter创造一个锐角（默认）；
bevel创建斜角；
round创建一个圆角。
公牛；miterlimit属性设置或返回最大斜接长度（默认为10）。斜接长度指的是内外线连接的属性是只有在两lines.miterlimit距离角是有效的miter之间的交换；
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR的画布document.getelementbyid（画布）；
VaR上下文= canvas.getcontext（2D）；
/ /线帽的性能测试
设置观察的参考线
Context.moveTo（10,10）；
Context.lineTo（10200）；
Context.moveTo（200,10）；
Context.lineTo（200200）；
上下文。线宽= 1；
context.stroke（）；
Context.beginPath（）；
Context.moveTo（50）；
Context.lineTo（200,50）；
背景。线帽=对接；
上下文。线宽= 10；
context.stroke（）；
Context.beginPath（）；
Context.moveTo（10100）；
Context.lineTo（200100）；
背景。线帽=圆；
上下文。线宽= 10；
context.stroke（）；
Context.beginPath（）；
Context.moveTo（10150）；
Context.lineTo（200150）；
背景。线帽=广场；
上下文。线宽= 10；
context.stroke（）；
/ / linjoin性能测试
/ /人字
Context.beginPath（）；
Context.moveTo（300,50）；
Context.lineTo（450100）；
Context.lineTo（300150）；
背景。线连接=人字；
上下文。线宽= 10；
context.stroke（）；
Context.beginPath（）；
Context.moveTo（400,50）；
Context.lineTo（550100）；
Context.lineTo（400150）；
背景。线连接=圆；
上下文。线宽= 10；
context.stroke（）；
Context.beginPath（）；
Context.moveTo（500,50）；
Context.lineTo（650100）；
Context.lineTo（500150）；
背景。线连接=伞；
上下文。线宽= 10；
context.stroke（）；
/ / miterlimit性能测试
Context.beginPath（）；
Context.moveTo（700,50）；
Context.lineTo（850100）；
Context.lineTo（700150）；
背景。线连接=人字；
背景。miterlimit =2；
上下文。线宽= 10；
背景。strokeStyle =# 2913ec ；
context.stroke（）；
每个属性的不同值的影响如下：
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。
