当在canvas上绘制线条时，发现线条比预期更粗且模糊，原因是canvas元素未在HTML中设置height和width属性，仅通过CSS设置无效。解决方法是在canvas标签内直接指定width和height属性，如<canvas id='canvas' width='500' height='500'></canvas>，这将确保线条正确显示，避免模糊和变粗现象。
自己写的小例子
<!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);
c
最低0.47元/天 解锁文章
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
