html5教程-HTml5 Canvas 整理笔记之画线
脚本宝典收集整理的这篇文章主要介绍了html5教程-HTml5 Canvas 整理笔记之画线，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
1.画线
1.1在画之前先“配置好画布”（以后不再提及）
实例介绍
//先设置一点canvas的style里面有属性使其有边框（好观察），居中（display:block，要先把canvas设置成块级元素，margin的设置中央才有效） /* *在script里面进行画画 */ <script> //获得canvas VAR can=document.getElementById("canvas"); //进行2d绘画使用con进行绘制 var con=can.getContext("2d"); /*Canvans的属性最好不要在css里面写， *因为 width 和 height不仅代表画布的大小 *还代表画布内里的精度、像素(不要写单位)。 */ can.width=1024; can.height=768; </script> 小提示：怕浏览器不兼容
1.2开始画线<"/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPjwvcD4KCjxwPmNvbnZhc8rHu/nT2te0zKy75tbGtcQ8L3A+Cgo8cD48aW1nIHNyyz0="/uploaDFile/Collfiles/20160413/20160413100505751.jpg" alt="这里写图片描述" tITle="/">
注：
moveTo 是指绘画的起点，moveTo(100,100)=beginPath()+lineto(100,100)，
beginPath()开启绘制状态，colsePath()为状态的封闭（会把绘画曲线闭合）。
为啥需要beginPath()和colsePath()？
因为cavans画布里面不只画一个东西，怕线和线“打架”。
温馨提示：
先fill再描边就填充色就不会覆盖一半的线边了，但是填充色被覆盖了，代码如下：
1.3线的属性
linecap
线条的头部，线段衔接的地方不会有效果
linejoin
线与线衔接的形式
belevel斜接
round圆角衔接
miter
miterlimit
当宽线条使用设置为 "miter" 的 lineJoin 属性绘制并且两条线段以锐角相交的时候，所得的斜面可能相当长。 当斜面太长，就会变得不协调。miterLimit 属性为斜面的长度设置一个上限。 这个属性表示斜面长度和线条长度的比值。默认是 10， 意味着一个斜面的长度不应该超过线条宽度的 10 倍。 如果斜面达到这个长度，它就变成斜角了。当 lineJoin 为 "round" 或 "bevel" 的时候，这个属性无效。
1.画线
1.1在画之前先“配置好画布”（以后不再提及）
实例介绍
//先设置一点canvas的style里面有属性使其有边框（好观察），居中（display:block，要先把canvas设置成块级元素，margin的设置中央才有效） /* *在script里面进行画画 */ <script> //获得canvas var can=document.getElementById("canvas"); //进行2d绘画使用con进行绘制 var con=can.getContext("2d"); /*Canvans的属性最好不要在css里面写， *因为 width 和 height不仅代表画布的大小 *还代表画布内里的精度、像素(不要写单位)。 */ can.width=1024; can.height=768; </script> 小提示：怕浏览器不兼容
1.2开始画线<"/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPjwvcD4KCjxwPmNvbnZhc8rHu/nT2te0zKy75tbGtcQ8L3A+Cgo8cD48aW1nIHNyYz0="/uploadfile/Collfiles/20160413/20160413100505751.jpg" alt="这里写图片描述" title="/">
注：
moveTo 是指绘画的起点，moveTo(100,100)=beginPath()+lineTo(100,100)，
beginPath()开启绘制状态，colsePath()为状态的封闭（会把绘画曲线闭合）。
为啥需要beginPath()和colsePath()？
因为cavans画布里面不只画一个东西，怕线和线“打架”。
温馨提示：
先fill再描边就填充色就不会覆盖一半的线边了，但是填充色被覆盖了，代码如下：
1.3线的属性
linecap
线条的头部，线段衔接的地方不会有效果
linejoin
线与线衔接的形式
belevel斜接
round圆角衔接
miter
miterlimit
当宽线条使用设置为 "miter" 的 lineJoin 属性绘制并且两条线段以锐角相交的时候，所得的斜面可能相当长。 当斜面太长，就会变得不协调。miterLimit 属性为斜面的长度设置一个上限。 这个属性表示斜面长度和线条长度的比值。默认是 10， 意味着一个斜面的长度不应该超过线条宽度的 10 倍。 如果斜面达到这个长度，它就变成斜角了。当 lineJoin 为 "round" 或 "bevel" 的时候，这个属性无效。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-HTml5 Canvas 整理笔记之画线全部内容，希望文章能够帮你解决html5教程-HTml5 Canvas 整理笔记之画线所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10