HTML5画布基本线条画示例教程
你是怎么画线的这和现实中的绘画差不多。1。移动画笔将画笔移动到绘画的开头。
2。确定第一支笔的停止点
三.在一个好的计划之后，选择一个笔刷（包括笔刷的厚度和颜色等）。
4。确定图
因为画布是基于状态的绘图（这很重要，稍后会解释），第一步是确定状态，最后一步将被绘制。
1。移动笔刷（MoveTo（））
我们还没刷的背景下，我们以此为例给出了修正的方法--用一个例子；mdash；context.moveto（100100）。这段代码的意思是移动刷（100100）点（单位是像素）。记住，这是在画布上画布的左上角的笛卡尔坐标系的原点，和Y轴的正方向和x轴方向。
2。行程止点（LineTo（））
以同样的方式，context.lineto（600600）。这句话的意思是从最后一笔停点的绘制（600600）。但需要明确的是，moveTo（）` ` LineTo（）在这里只是一种状态。这是计划，我要画，我还没开始画，这只是个计划。
三.选择画笔
这里我们只设置画笔的颜色和厚度。
context.linewidth = 5，这句话的意思是设置笔刷（线）为10px。
context.strokestyle =# aa394c 。这句话的意思是设置玫瑰红的画笔（线）的颜色。
因为画布是基于状态绘图的，所以我们选择画笔的粗细和颜色以及画笔的粗细和颜色。
4。确定图
确定图的两种方法，填补（中风）和（），一个基本的画点应该知道，前者是指填充，后者指中风。因为我们只画一条线，只要行程可调用代码context.stroke（）。
画一条线
不是直线段吗！那是一派胡言！让我们开始画画吧。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
从行开始
你的浏览器不支持画布让我们换一个！
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
Context.moveTo（100100）；
Context.lineTo（600600）；
context.linewidth = 5；
context.strokestyle =# aa394c ；
context.stroke（）；
}
运行结果：
（一个小伙伴问我在页面右下角有什么熊）哦，我忘了解释了，那是我的防伪水印！
我还标记了一个页面解析以供参考。
在这里，我删除了原始标签中的宽度和高度，但在Javaｓｃｒｉｐｔ代码中，画布对象的宽度和高度的属性被设置。
摘要：要设置画布的大小，只有这两种方法
1。设置在标签中；
2。在js代码中设置画布的属性。
怎么，不是很酷吗然后我们再画一个多线的数字，你觉得离艺术家更远吗这只是一条简单的线。这对我们来说只是一小步，但对人类来说却是一大步！
画折线
我们已经成功地画出了一个线段，如果我想用两个笔画或一个笔画画一条折线呢
聪明的小伙伴一定会想到的。它不容易.可以重用LineTo（）。在这里，我要画一个漂亮的线。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
画折线
你的浏览器不支持画布让我们换一个！
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
Context.moveTo（100100）；
Context.lineTo（300300）；
Context.lineTo（100500）；
context.linewidth = 5；
context.strokestyle =# aa394c ；
context.stroke（）；
}
运行结果：
绘制折线
同样，我们要做什么来画许多不同风格的折叠线呢例如，我们在这里画了三条虚线，红色，蓝色和黑色。聪明的小伙伴一定会想到它，这并不简单，只需要移动画笔，然后改变画笔的颜色。代码格式是一样的，拷贝就可以了。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
画折线
你的浏览器不支持画布让我们换一个！
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
Context.moveTo（100100）；
Context.lineTo（300300）；
Context.lineTo（100500）；
context.linewidth = 5；
context.strokestyle =红色；
context.stroke（）；
Context.moveTo（300100）；
Context.lineTo（500300）；
Context.lineTo（300500）；
context.linewidth = 5；
context.strokestyle =蓝色；
context.stroke（）；
Context.moveTo（500100）；
Context.lineTo（700300）；
Context.lineTo（500500）；
context.linewidth = 5；
context.strokestyle =黑；
context.stroke（）；
}
运行结果：
为什么这不是很奇怪吗第一个红色的，蓝色的和黑色的呢为什么都是黑色的事实上，这里的原因是有点过，我已经强调过；mdash；画布是基于状态的渲染。
这是什么意思当这个代码是用每一次行程（）的使用，它将以前的设置状态了。第一次中风（）绘制的，一个红色的折线绘制。当第二行程（）使用，红色的折叠线将重新划定之前，但刷已改为蓝色的此时，所以断了线的都是蓝色的。换句话说，strokeStyle属性覆盖。以同样的方式，当第三画，画笔的颜色是最后黑色的，所以它将重画三黑色线，三线，你在这里看到的其实是拉3次，共6个断了线。
我想画三条线，不是吗艺术家的灵魂是现在吗它不是得救了吗No, there's a way.
开始绘制与调用（）
为了绘制方法不重复，我们可以添加调用（）在每次渲染，它代表了代码之后调用（）。我们把context.beginpath（）前三图。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
画折线
你的浏览器不支持画布让我们换一个！
在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
Context.beginPath（）；
Context.moveTo（100100）；
Context.lineTo（300300）；
Context.lineTo（100500）；
context.linewidth = 5；
context.strokestyle =红色；
context.stroke（）；
Context.beginPath（）；
Context.moveTo（300100）；
Context.lineTo（500300）；
Context.lineTo（300500）；
context.linewidth = 5；
context.strokestyle =蓝色；
context.stroke（）；
Context.beginPath（）；
Context.moveTo（500100）；
Context.lineTo（700300）；
Context.lineTo（500500）；
context.linewidth = 5；
context.strokestyle =黑；
context.stroke（）；
}
你可以看到，我们已经得到了我们的预期。由于使用（）的调用，绘图的过程，因为我们有思想，得出只有三次，只有一time.beginpath绘制折线图（）是设置状态的起点。在那之后，代码的图形状态的范围是在渲染方法中风结束（），填写（）或（）closepath。作为closepath（），我们将谈论它。
所以我们需要使用调用（）每次我们开始画，和代码的完整性，我们建议您使用closepath（）在每个图。