标签：200 canvas lineTo 基础 moveTo stroke HTML5 context 100
<body>
<!--
1，canvas的宽和高要在标签中写，写在style中将会使画布拉伸到指定宽和高，不是真正的宽高。
-->
<canvas id='drawing' width="300" height="700"></canvas>
<script>
let drawing = document.querySelector('#drawing');
let context = drawing.getContext('2d');
// //画一个横线的路径
// context.moveTo(100,100);
// context.lineTo(200,100);
// //描边的颜色
// context.strokeStyle = '#6495ED';
// //描边的宽度
// context.lineWidth = 10;
// //对路径进行描边，不描边不显示
// context.stroke();
//画三条不同颜色的线
//Object.beginPath() 开启一个新路径，遇到Object.stroke()路径结束
context.beginPath();
context.moveTo(100,100);
context.lineTo(200,100);
context.strokeStyle = '#6495ED';
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(100,200);
context.lineTo(200,200);
context.strokeStyle = "#FF0000";
context.lineWidth = 10;
context.lineCap = "round";//每个末端圆形线帽
context.stroke();
context.beginPath();
context.moveTo(100,300);
context.lineTo(200,300);
context.strokeStyle = "blueviolet";
context.lineWidth = 15;
context.lineCap = "square";//线条首位样式：正方形线帽
context.stroke();
//分界线
context.beginPath();
context.moveTo(0,350);
context.lineTo(300,350);
context.strokeStyle = "black";
context.lineWidth = 1;
context.lineCap = "butt";//默认样式 butt 平直的边缘
context.stroke();
//三角形1
context.beginPath();
context.moveTo(100,400);
context.lineTo(200,400);
context.lineTo(200,500);
context.lineTo(100,400);
context.strokeStyle = "black";
context.lineWidth = 10;
context.stroke();
//三角形2
//Object.closePath() 自动创建从当前点到开始点的路径
context.beginPath();
context.moveTo(100,550);
context.lineTo(200,550);
context.lineTo(200,650);
context.closePath();
context.strokeStyle = "pink";//描边的颜色
context.lineWidth = 10;//线条宽度
context.fillStyle = "aqua";//设置填充的颜色,设置在填充之前
context.fill();//填充
context.stroke();//描边
/*
两个三角形不同的原因在于，上面的三角形用的lineTo连接有缺觉的地方是moveTo与lineTo连接造成的，而另一个
锐角边因为是两个lineTo衔接有自动填充效果，
下面的三角形用是画了两个直角边没有用lineTo连接第三边，而是使用closePath方法连接当前点与开始的点，就 避免上面的现象出现。
*/
</script>
</body>
标签：200,
canvas,
lineTo,
基础,
moveTo,
stroke,
HTML5,
context,
100
From： https://blog.51cto.com/u_15964288/6056543