javascript - 奇怪的
问题描述
某些线条lineJoin="round"
奇怪地呈现在某些比例上,这是一个比例为 1.403619311470477 且没有它的示例:https ://jsfiddle.net/kxjcosgf/2/
<canvas id="canvas" width="2000" height="2000"> </canvas>
<script>
const points = "45.13869240187139,481.020616681278,45.13869240187139,480.72980663647314,44.84788235706651,479.5665664572536,44.70247733466407,477.9671112108268,44.84788235706651,477.53089614361943,44.84788235706651,477.385491121217,44.993287379468946,476.80387103160723,45.28409742427383,476.22225094199746,46.44733760349335,475.059010762778,47.319767737907995,474.9136057403755,47.90138782751775,475.34982080758283,48.19219787232263,475.7860358747902,48.483007917127516,476.5130609868024,48.62841293952995,476.94927605400966,48.33760289472507,477.67630116602186".split(",")
const ctx = canvas.getContext("2d")
ctx.strokeStyle = "black"
ctx.lineWidth = 2
ctx.lineCap = "round"
ctx.lineJoin = "round"
ctx.beginPath()
ctx.moveTo(points[0], points[1])
for (let i = 2; i < points.length; i += 2) {
ctx.lineTo(points[i], points[i + 1])
}
ctx.stroke()
ctx.scale(1.403619311470477, 1.403619311470477)
ctx.beginPath()
ctx.moveTo(points[0], points[1])
for (let i = 2; i < points.length; i += 2) {
ctx.lineTo(points[i], points[i + 1])
}
ctx.stroke()
window.scrollBy(0, 400)
</script>
我期望顶部笔划的缩放版本(标记为蓝色),但在 Chrome 94.0 上会出现奇怪的光线。
解决方案
推荐阅读
- python - 如何根据列值分离我的数据框并将其导出到 excel 文件?
- workflow - Activiti 工作流重试机制是如何工作的
- java - JDK 13 预览功能:Textblock 为 equals 和 == 返回 false。制表符空间是否相关?
- mysql - Mysql Right join with mutiple condtion不起作用
- android - Android / iOS 应用内浏览器上的证书固定
- sql - 在 ODBC 中创建带有 blob 字段的表的 DDL 语法是什么?
- wpf - 如何在 WPF 项目中将 Quartz 配置保存到文件中?
- algorithm - 1. 请在 Codesignal.com 上解释这个解决方案 Rectangle Rotation 2. 请解释为什么我的解决方案不起作用
- python - 在 Django 中创建对象后重定向到 url 时出错
- c# - 如何使用 C# 从 OpenText ECM 页面下载文件