HTML5 Canvas基本绘制线条教程
![图片[1]-HTML5 Canvas基本绘制线条教程-学吧号](https://www.proejc.com/wp-content/uploads/2022/10/4897d79dca02fb0ab1276cee26a6ea88-1.jpg)
HTML5 Canvas基本绘制线条教程 怎么画线条？和现实中画画差不多： 1.移动画笔，使画笔移动至绘画的开始处 2.确定第一笔的停止点 3.规划好之后，选择画笔（包括画笔的粗细和颜色等） 4.确定绘制 因为Canvas是基于状态的绘制（很重要，后面会解释），所以前面几步都是在确定状态，最后一步才会具体绘制。 1.移动画笔(moveTo()) 之前我们获得了画笔context，所以以此为例，给出改方法的使用实例——context.moveTo(100,100)。
这句代码的意思是移动画笔至(100,100)这个点（单位是px）。
记住，这里是以canvas画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。 2.笔画停点(lineTo()) 同理，context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚，这里的moveTo()“lineTo()都只是状态而已，是规划，是我准备要画，还没有开始画，只是一个计划而已！ 3.选择画笔 这里我们暂且只设置一下画笔的颜色和粗细。
context.lineWidth = 5，这句话的意思是设置画笔(线条)的粗细为10px。 context.strokeStyle = “#AA394C”，这句话的意思是设置画笔(线条)的颜色为玫红色。 因为Canvas是基于状态的绘制，所以我们在选择画笔粗细和颜色的同时，其实也是选择了线条的粗细和颜色。
4.确定绘制 确定绘制只有两种方法，fill()和stroke()，有点绘画基础的应该知道，前者是指填充，后者是指描边。因为我们只是绘制线条，所以只要描边就可以了。调用代码context.stroke()即可。
画一个线条 不就一条线段吗！废话了这么多！那我们就开始画吧。 JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！ 运行结果：我还标注了一个页面解析图，供大家参考。这里我将原本 标签中的width和height去掉了，但在JavaScript代码中设置了canvas对象的width和height的属性。
小结：要设置画布的大小，只有这两种方法 1.在标签中设置； 2.在JS代码中设置canvas的’属性. 怎么样，是不是非常的酷。接下来我们要加快脚步了，绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢？别看这只是简简单单的一条线段，这一画只是我们的一小步，但却是人类的一大步！ 绘制折线 上面我们已经成功绘制了一条线段。那么，如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢？ 聪明的小伙伴肯定已经想到了，这还不简单，复用lineTo()就可以了。
下面我就献丑随便画了一条优美的折线~ JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！ 运行结果：绘制多条折线 那同理，我们要绘制多条样式各不相同的折线怎么办呢？比如我们在这里画三条折线，分别是红色、蓝色、黑色。聪明的小伙伴肯定想到了，这还不简单，只需要平移一下再改下画笔颜色就行了。代码格式都一样的，复制就可以了。
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！ 运行结果：咦？是不是很奇怪？说好的先红色，再蓝色，再黑色呢？怎么全是黑色了？其实，这里的原因是我之前一直强调的一点——Canvas是基于状态的绘制。 什么意思呢？其实这段代码每次使用stroke()时，它都会把之前设置的状态再绘制一遍。第一次stroke()时，绘制一条红色的折线；第二次stroke()时，会再重新绘制之前的那条红色的折线，但是这个时候的画笔已经被更换成蓝色的了，所以画出的折线全是蓝色的。换言之，strokeStyle属性被覆盖了。
同理，第三次绘制的时候，画笔颜色是最后的黑色，所以会重新绘制三条黑色的折线。所以，这里看到的三条折线，其实绘制了3次，一共绘制了6条折线。 那么，我想绘制三条折线，难道就没有办法了吗？艺术家之魂到此为止了么？没救了么？不，还有办法。
使用beginPath()开始绘制 为了让绘制方法不重复绘制，我们可以在每次绘制之前加上beginPath()，代表下次绘制的起始之处为beginPath()之后的代码。我们在三次绘制之前分别加上context.beginPath()。 JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！可以看到，这里得到了我们预想的结果。
因为使用了beginPath()，所以这里的绘制过程如我们所想的那样，只绘制了三次，而且每次只绘制一条折线。beginPath()是绘制设置状态的起始点，它之后代码设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath()，至于closePath()之后会讲到。 所以我们每次开始绘制前都务必要使用beginPath()，为了代码的完整性，建议大家在每次绘制结束后使用closePath()。
菜鸟求教如何设置画布
![图片[2]-HTML5 Canvas基本绘制线条教程-学吧号](https://www.proejc.com/wp-content/uploads/2022/10/0802fc244a932bcc4899402ec118412f-1.jpg)
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） – 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext(“2d”) 对象的属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
html canvas怎么划线
![图片[3]-HTML5 Canvas基本绘制线条教程-学吧号](https://www.proejc.com/wp-content/uploads/2022/10/210892df9c795324bb67556eb7e0f40c-1.jpg)
<!DOCTYPE html><html><head> <meta charset=”utf-8″> <title>菜鸟教程(runoob.com)</title> </head><body><canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”>您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById(“myCanvas”);var ctx=c.getContext(“2d”);ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke();</script></body></html>
可以去看看菜鸟教程，了解一下基础api。
如何使用HTML5的Canvas图形元素绘制图形
![图片[4]-HTML5 Canvas基本绘制线条教程-学吧号](https://www.proejc.com/wp-content/uploads/2022/10/e6a3e5a62e870407a887ed652c3d4e39-1.jpg)
1、canvas绘制矩形 <!DOCTYPE html><html><head lang=”en”><meta charset=”UTF-8″><title>canvas绘制矩形</title><script type=”text/javascript” src=”canvas2.js”></script><style type=”text/css”>body {margin: 0;padding: 0;}</style></head><body onload=”draw(‘canvas’)”><canvas id=”canvas” width=”400″ height=”300″></canvas></body></html>js:/*** Created by winson on 2016/9/11.*/function draw(id) {var canvas = document.getElementById(id);//用getElementById获取到canvas对象var context = canvas.getContext(‘2d’);//取得上下文context.fillStyle = “green”;//绘制背景的颜色context.strokeStyle = “#fff”;//绘制边框的颜色context.lineWidth = 5; //设置画笔宽度context.fillRect(0, 0, 400, 300);//绘制context.strokeRect(50, 50, 180, 120);}
想学习HTML5，有什么好的书籍推荐吗？
![图片[5]-HTML5 Canvas基本绘制线条教程-学吧号](https://www.proejc.com/wp-content/uploads/2022/10/b1145ce637a835d8b2aae8c81a103822-1.jpg)
首先，永远不要用《从入门到精通》那种书学习，当字典差不多，用于自学，那就准备《从入门到放弃》吧~~~然后嘛，HTML5本身由不同的语言组成，是HTML+CSS+JavaScript，三种语言各自有各自的特点，HTML与CSS，属于结构和样式，就是做网页布局，JS是逻辑层面，脚本语言。结构样式方面，比较推荐当前比较新的书籍，比如《HTML5布局之路》，很详细的讲解了布局知识，还提供了相关的项目经验以及面试题。
JS方面，权威方面的书籍是《高级JavaScript程序设计》和《JS犀牛书》，但是这两本都比较适用于有一定基础的人。
对于没基础的，可能国外的head first系列会更适合，国内的话，很适合入门的书籍目前没看到。
如何使用HTML5 Canvas动态的绘制拓扑图
![图片[6]-HTML5 Canvas基本绘制线条教程-学吧号](https://www.proejc.com/wp-content/uploads/2022/10/212a5bef6d8c792398b52b33dcf9e783.jpg)
<canvas>动态的绘制拓扑图1.添加引用\r\n右击项目-添加引用-浏览 找到本地的dll文件\r\n2.using 该dll文件里面代码的名称空间 \r\n然后就可以调用dll文件里面的类和方法<canvas>定义和用法：Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D 对象获得。
这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 “2d” 作为唯一的参数传递给它而获得的。<canvas> 标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas> 标记及其 API 可以使用位于excanvas点sourceforge点net的 ExplorerCanvas 开源项目来模拟。提示：如果希望学习如何使用 <canvas> 来绘制图形，可以访问 Mozilla 提供的Canvas 教程（英文）以及相应的中文 Canvas 教程。
使用 <canvas> 标记绘图大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的getContext() 方法获得的一个“绘图环境”对象上。Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。
一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。
要把文本加入到一个 <canvas> 图形，必须要么自己绘制它再用位图图像合并它，或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。Canvas 对象的属性height 属性画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。
当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。width 属性画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。
当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。
