canvas-2线段的绘制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas-2线段的绘制</title>
</head>
<body>
<!-- 创建一个600*600的画布 边框1像素 黑色 -->
<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1") // 1.找到画布对象
var ctx = canvas1.getContext("2d") // 2.上下文对象（画笔）
ctx.beginPath() // 开始绘制路径
ctx.moveTo(30,30) // 设置绘制的起点
ctx.lineTo(100,190) // 设置经过某个位置
ctx.lineTo(180,90) // 设置经过某个位置
ctx.closePath() // 结束绘制路径
ctx.strokeStyle = "#0000FF" //设置路径颜色为蓝色
ctx.lineWidth = 10 // 设置路径宽度为10
// ctx.lineCap = "round" // 设置线段起始点为圆角
ctx.miterLimit = "1px" // 设置两条线段相交的角的角度比较尖锐
尖角注释了，圆角放开的效果
// ctx.lineJoin = "round" // 设置线段相交的地方的外角为圆角
ctx.stroke() // 渲染路径
ctx.fill()
</script>
</body>
</html>
