canvas的学习笔记 7 lineCap

知识点:lineCap=type 共有三个值

    1、butt:线段末端以方形结束

     2、round:线段末端以圆形结束

     3、square:线段末端以方形结束,但是增加一个宽度和线段相同,高度是线段厚度一半的矩形区域

 

具体demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="radians" width="300" height="500"></canvas>
</body>
<script>
// lineCap = type 线条末端的样式
// 1 butt:线段末端以方形结束
// 2 round:线段末端以原型结束
// 3 square 线段末端以方形结束.但增加了一个宽度和线条形同,高度是线段厚度一半的举行区域
function draw(){
var canvas =document.getElementById("radians")
if(!canvas.getContext) return;
var ctx=canvas.getContext("2d");
var lineCap=["butt","round","square"]
for( var i=0;i<3;i++){
ctx.beginPath()
ctx.moveTo(20+30 * i,30)
ctx.lineTo(20+30*i,100);
ctx.lineWidth=20;
ctx.lineCap=lineCap[i];
ctx.stroke()
}

// 画两条水平线来衡量所画的线
ctx.beginPath()
ctx.moveTo(0,30);
ctx.lineTo(300,30);


ctx.moveTo(0,100);
ctx.lineTo(300,100)

// 设置水平线的颜色
ctx.strokeStyle="blue"
// 设置水平线的宽度
ctx.lineWidth=1;
ctx.stroke()

}
draw()
</script>
</html>

猜你喜欢

转载自www.cnblogs.com/Progress-/p/12581310.html