Fatal编程技术网
  • javascript/
  • Javascript 使用画布绘制抗锯齿圆形封顶线

Javascript 使用画布绘制抗锯齿圆形封顶线

javascript canvas html5-canvas

Javascript 使用画布绘制抗锯齿圆形封顶线,javascript,canvas,html5-canvas,antialiasing,Javascript,Canvas,Html5 Canvas,Antialiasing,我正在尝试为音频播放器创建一个样式化的时间轴。我想画一条很粗的线，两端有圆帽。我认为用canvas来做这件事会相对简单一些。然而，我发现，至少在Mac OS上的Chrome中，线条没有抗锯齿；而且（可能因此）线条帽被拉长，而不是完美的半圆 让我困惑的是，当我查看该行时，它是反锯齿的，带有预期的大写字母。这让我想知道我的代码中是否有东西触发了浏览器中的非抗锯齿模式 这是我的全部代码： <html> <head> <style> body

我正在尝试为音频播放器创建一个样式化的时间轴。我想画一条很粗的线，两端有圆帽。我认为用
canvas
来做这件事会相对简单一些。然而，我发现，至少在Mac OS上的Chrome中，线条没有抗锯齿；而且（可能因此）线条帽被拉长，而不是完美的半圆

让我困惑的是，当我查看该行时，它是反锯齿的，带有预期的大写字母。这让我想知道我的代码中是否有东西触发了浏览器中的非抗锯齿模式

这是我的全部代码：

<html>
<head>
    <style>

        body {
            background-color: #212b69;
        }

        .centering {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #timeline {
            width: 60%;
            height: 50px;
        }

    </style>
</head>
<body>
    <div class="centering">
        <canvas id="timeline" />
    </div>
    <script type="text/javascript">

        var timeline = document.getElementById('timeline');
        var ctx = timeline.getContext('2d');
        var centrline = timeline.height/2;

        // ctx.translate(0.5, 0.5); // I have tried the half-pixel trick

        // line settings
        ctx.lineCap = "round";
        ctx.lineWidth = 30;
        ctx.strokeStyle = "white";

        // draw test stroke
        ctx.beginPath();
        ctx.moveTo(20, centrline);
        ctx.lineTo(60, centrline+10); // offset to show aliasing of edges
        ctx.stroke();

    </script>
</body>
</html>


身体{
背景色：#212b69；
}
.定心{
身高：100%；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#时间线{
宽度：60%；
高度：50px；
}
var timeline=document.getElementById（“timeline”）；
var ctx=timeline.getContext（'2d'）；
var centrline=timeline.height/2；
//ctx.translate（0.5,0.5）；//我已经尝试了半像素的技巧
//线路设置
ctx.lineCap=“圆形”；
ctx.lineWidth=30；
ctx.strokeStyle=“白色”；
//绘制测试笔划
ctx.beginPath（）；
ctx.moveTo（20，中心线）；
ctx.lineTo（60，中心线+10）；//偏移以显示边的锯齿
ctx.stroke（）；
我的结果是：

与结果相比：

据我所知，矢量消除混叠是由浏览器决定的。还要注意的是，我尝试了将画布平移半个像素的技巧，以使其进入抗锯齿模式。如果没有办法获得我想要的画布，是否还有其他方法？考虑到我只想创建一个相对简单的形状…

只要删除以下css规则，形状就会停止倾斜

#timeline {
            width: 60%;
            height: 50px;
        }
下面是一个没有歪斜的工作示例：

var timeline=document.getElementById（'timeline'）；
var ctx=timeline.getContext（'2d'）；
var centrline=timeline.height/2；
//ctx.translate（0.5,0.5）；//我已经尝试了半像素的技巧
//线路设置
ctx.lineCap=“圆形”；
ctx.lineWidth=30；
ctx.strokeStyle=“白色”；
//绘制测试笔划
ctx.beginPath（）；
ctx.moveTo（20，中心线）；
ctx.lineTo（60，中心线+10）；//偏移以显示边的锯齿
ctx.stroke（）

正文{
背景色：#212b69；
}
.定心{
身高：100%；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}




您正在用css规则扭曲画布。谢谢！我确实想知道百分比宽度是否有问题，并用像素宽度代替了它。那么CSS的宽度和高度与画布的宽度和高度属性不同？为了实现60%宽度样式的行为，是否需要通过Javascript使用
resize
事件侦听器调整大小？