canvas设置线条的粗细,canvas有哪些属性
一、线条的帽子lineCap
取值：对接（默认值),圆形圆头，正方形方头
var canvas=文档。getelementbyid(“canvas”)；canvas . width=800 canvas . height=800 var context=canvas。获取上下文(“2d”)；context . line width=40 context . stroke style= # 005588//三个beginpath()画了3条平行线语境。begin path()；context.moveTo(100，200)；context.lineTo(700，200)；context.lineCap= buttcontext。笔画()；语境。begin path()；context.moveTo(100，400)；context.lineTo(700，400)；context.lineCap= roundcontext。笔画()；语境。begin path()；context.moveTo(100，600)；context.lineTo(700，600)；context.lineCap= squarecontext。笔画()；//基线上下文。线宽=1；context . stroke style= # 27 acontext . move to(100，100)；context.lineTo(100，700)；context.moveTo(700，100)；context.lineTo(700，700)；语境。笔画()；
圆形物做动画的时候需要圆角可以直接画，线帽的效果只能用于线段的开始处和结尾处，不能用于连接处。
lineCap=square 可以用来在线段闭合时候完全闭合，但是还是推荐使用clothPath()闭合。
var canvas=文档。getelementbyid(“canvas”)；canvas . width=800 canvas . height=800 var context=canvas。获取上下文(“2d”)；语境。begin path()；context.moveTo(100，350)；context.lineTo(500，350)；context.lineTo(500，200)；context.lineTo(700，400)；context.lineTo(500，600)；context.lineTo(500，450)；context.lineTo(100，450)；context.lineTo(100，350)；//上下文。关闭路径()；//推荐context . line width=10 context . line cap= square//不推荐context . fill style= yellow context。笔画样式= # 058 上下文。fill()；语境。笔画()；二、画一个五角星，说明线条其它状态属性
圆上的五个角平分360 ,每个角72 ,90 -72=18
小圆上的角平分72 ,18 36=54
角度转弧度——弧度=角度*/180 即(18i * 72)*数学。圆周率/180
var canvas=文档。getelementbyid(“canvas”)；canvas . width=800 canvas . height=800 var context=canvas。获取上下文(“2d”)；语境。begin path()；//角度转弧度：除以180 * PIfor(var I=0；i5；I){上下文。行到(数学。cos((18 I * 72)/180 *数学.PI)*300 400，-Math.sin((18 i*72)/180*Math .PI)* 300 400)；语境。行到(数学。cos((54i * 72)/180 *数学.PI)*150 400，-Math.sin((54 i*72)/180*Math .圆周率)* 150 400);}上下文。关闭路径()；context.lineWidth=10context上下文。笔画()；
封装成函数：
窗户。onload=function(){ var canvas=document。getelementbyid(“canvas”)；canvas . width=800 canvas . height=800 var context=canvas。获取上下文(“2d”)；context . line width=10 drawstar(context，150，300，400，400)}函数drawStar(ctx，R，R，x，y)，{ CTX。begin path()；//角度转弧度：除以180 * PI for(var I=0；i5；我){ CTX。行到(数学。cos((18 I * 72)/180 *数学.PI)*R x，-Math.sin((18 i*72)/180*Math .PI)* R y)；CTX。行到(数学。cos((54 I * 72)/180 *数学.PI)*r x，-Math.sin((54 i*72)/180*Math .PI)* r y)；} CTX。关闭路径()；CTX。笔画()；}分别修改小r=80,200,400得到下面图形
增加一个顺时针旋转的参数：腐烂
窗户。onload=function(){ var canvas=document。getelementbyid(“canvas”)；canvas . width=800 canvas . height=800 var context=canvas。获取上下文(“2d”)；context.lineWidth=10drawStar(上下文，150,300,400,400,30);}//腐烂顺时针旋转的角度函数drawStar(ctx，R，R，x，y，rot){ CTX。begin path()；//角度转弧度：除以180 * PI for(var I=0；i5；我){ CTX。行到(数学。cos((18 I * 72-rot)/180 * Math .PI)*R x，-Math。sin((18i * 72-rot)/180 * Math .PI)* R y)；CTX。行到(数学。cos((54i * 72-rot)/180 * Math .PI)*r x，-Math。sin((54i * 72-rot)/180 * Math .PI)* r y)；} CTX。关闭路径()；CTX。笔画()；}旋转30度的效果如下：
三、线条的连接lineJoin和miterLimit
1、直线连接取值
斜接（默认)永远呈现一个尖角，斜面斜接，圆形圆角
斜角规像彩带折下来的效果。
2、斜接相关尖角限量的属性
设置小r为30,排队为斜接，效果如下：角没有延伸成尖角，而是采取斜角规的方式来显示。
context . line join= miterdrawStar(上下文，30,300,400,400,30);
为什么？
因为context.miterLimit=10，所以默认值是10，
仅当lineJoin为斜接时，Miterlimit才有效。
当使用斜接作为连线方式时，MiterLimit指的是产生的内角和外角的距离的最大值。
默认值为10，这意味着最大值为10px。一旦超过10px，就会用斜角显示。
当上内圆的半径R设置为30时，形成的尖角非常尖锐，内角和外角之间的距离超过10的miterLimit。
现在把miterlimit改成20，效果如下：
context.lineJoin= mitercontext.miterLimit=20drawStar(上下文，30，300，400，400，30)；
注意：miterLimit不是白尖到黑尖的距离，远大于20px。
生成miterLimit时，线必须是宽的，宽线中间的线的尖角是到外边缘尖角的直接距离。
Canvas给出了miterLimit的经验值10。只有在极其特殊的情况下，需要显示非常尖锐的角度时，才需要修改miterLimit。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。