好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

html5教程-HTml5 Canvas 整理笔记之画线

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

1.画线

1.1在画之前先“配置好 画布 ”(以后不再提及)

实例介绍

 //先设置 一点 canvas的style里面有属性使其有边框(好观察),居中(dis play :block,要先把canvas设置成块级元素,m arg in的设置中央才有效)    /* *在script里面进行画画 */ <script>    //获得canvas      VAR  can=document.getElementById("canvas");     //进行2d绘画使用con进行 绘制      var con=can.getContext("2d");     /*Canvans的属性最好不要在css里面写,     *因为 width 和 h ei ght不仅代表画布的大小     *还代表画布内里的精度、像素(不要写单位)。     */    can.width=1024;    can.height=768; </script>  

小提示:怕浏览器不兼容

1.2 开始 画线 vc 3Ryb25nPjwvcD4KCjxwPmN vb nZhc8rHu/nT2te0zKy75tbGtcQ8L3A+Cgo8cD48aW1nIHN yy z0="/uploa DF ile/Collfiles/20160413/20160413100505751. jpg " alt="这里写图片描述" t IT le="/">

注:

moveTo 是指绘画的起点,moveTo(100,100)=be gin Path()+l inet o(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开始画线 vc 3Ryb25nPjwvcD4KCjxwPmNvbnZhc8rHu/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" 的时候,这个属性无效。 

觉得 可用,就经常来吧! 欢迎评论哦!&nbs p; html5教程 ,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是 为你收集整理的 html5教程-HTml5 Canvas 整理笔记之画线 全部内容,希望文章能够帮你解决 html5教程-HTml5 Canvas 整理笔记之画线 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于html5教程-HTml5 Canvas 整理笔记之画线的详细内容...

  阅读:50次