自己写的小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas动画</title>
<style type="text/css">
#canvas {
width: 500px;
height: 500px;
border: 1px dashed #000000;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.lineWidth=1;
// ctx.strokeStyle='#fff000';
//line
ctx.moveTo(0, 140);
ctx.lineTo(30, 100);
ctx.stroke();
</script>
</body>
</html>
结果：
canvas的边框是1px，画布上的线宽设置也是1px，但明显画布上的线变粗变模糊了，而且canvas的宽高与线条起点的定位很不相符，查找各种原因发现：canvas没有设置height与width，css中设置的height与weight对canvas不管用。
修改canvas标签<canvas id="canvas" width="500" height="500"></canvas>
结果：
显示正常