相关疑难解决方法(0)
如何修复HTML5画布中的模糊文本？
我和n00b一起HTML5工作,我正在使用它canvas来渲染形状,颜色和文字.在我的应用程序中,我有一个视图适配器,动态创建一个画布,并用内容填充它.除了我的文本呈现非常模糊/模糊/拉伸之外,这非常有效.我已经看到了很多,为什么定义其他职位的宽度和高度在CSS会引起这个问题,但我确定这一切javascript.
相关代码(查看小提琴):
HTML
<div id="layout-content"></div>
使用Javascript
var width = 500;//FIXME:size.w;
var height = 500;//FIXME:size.h;
var canvas = document.createElement("canvas");
//canvas.className="singleUserCanvas";
canvas.width=width;
canvas.height=height;
canvas.border = "3px solid #999999";
canvas.bgcolor = "#999999";
canvas.margin = "(0, 2%, 0, 2%)";
var context = canvas.getContext("2d");
//////////////////
//// SHAPES ////
//////////////////
var left = 0;
//draw zone 1 rect
context.fillStyle = "#8bacbe";
context.fillRect(0, (canvas.height*5/6)+1, canvas.width*1.5/8.5, canvas.height*1/6);
left = left …推荐指数
解决办法
查看次数
HTML5画布中的中心(比例字体)文本
我希望能够在我可以计算的矩形区域中居中单行文本.我期望在画布上的二维几何中做的一件事就是将宽度未知的东西居中.
我听说作为一种解决方法,您可以在HTML容器中创建文本,然后调用jQuery的width()函数,但是我没有正确处理文档正文的瞬间添加？并得到宽度为0.
如果我有一行文本,比填充屏幕中的大部分宽度短得多,我如何知道在我知道的字体大小的画布上它有多宽？
TIA,
推荐指数
解决办法
查看次数
使用 React 在 HTML Canvas 中打字时将文本调整为圆形（通过缩放）
我试图在打字时让文本适合一个圆圈，如下所示：
我尝试遵循Mike Bostock 的将文本调整为圆形教程，但到目前为止失败了，这是我可怜的尝试：
import React, { useEffect, useRef, useState } from "react";
export const TwoPI = 2 * Math.PI;
export function setupGridWidthHeightAndScale(
width: number,
height: number,
canvas: HTMLCanvasElement
) {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
// Otherwise we get blurry lines
// Referenece: [Stack Overflow - Canvas drawings, like lines, are blurry](/sf/answers/4140044961/)
const scale = window.devicePixelRatio;
canvas.width = width * scale;
canvas.height = height * scale;
const canvasCtx = canvas.getContext("2d")!; …推荐指数
解决办法
查看次数
HTML5 Canvas translate(0.5,0.5) 不修复线条模糊
阅读相关 文章，我尝试以像素为单位强制画布大小，为路径指定半像素以及 context.translate(0.5) 但我的画布线条仍然模糊。
const ctx = canvas.getContext("2d");
ctx.translate(0.5, 0.5);
/* Function to draw HTML5 canvas line */
const drawPath = (startX, startY, endX, endY) => {
ctx.beginPath();
ctx.lineWidth = "1";
ctx.strokeStyle = "red";
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
};
我哪里出错了，如何让我的线条像演示中框周围的边框一样清晰？
它对我来说是如何出现的：
推荐指数
解决办法
查看次数
如何修复HTML5画布中形状模糊的边缘？
我使用canvas元素制作了一个非常简单的矩形。但是，如果fillRect（x，y，width，height）中x和y的参数为0和0以外的任何值，则放大和/或在移动设备上时，所有边缘看起来都完全模糊。如果x和y分别为0和0，则即使放大，矩形的顶部和左侧边缘也是超定义的，而底部和右侧边缘则模糊。我正在使用Chrome / Firefox在1920x1080屏幕上以及使用Safari在750x1334手机屏幕上渲染此图像。
放大到100％时，在台式机上这不是问题，但在移动设备上看起来像废话。如果在Chrome和Firefox以及JSFiddle上完全放大，则可以清楚地看到边缘模糊。我不使用CSS调整画布上的宽度和高度。使用canvas属性和/或JS完成。我用来在浏览器上测试的HTML如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
</head>
<body>
<canvas id="gameCanvas" width="150" height="150">A game.</canvas>
<script>
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 100, 100);
</script>
</body>
</html>
编辑：我不是想画一条1像素的线。我也尝试使用半像素值进行实验，但这会使模糊边缘变得更加糟糕。
前两个屏幕截图分别来自Safari上的iPhone 7屏幕（非缩放和缩放）。最后一张屏幕截图是在1920x1080笔记本电脑屏幕上，在Chrome上放大了。
推荐指数
解决办法
查看次数
HTML Canvas:文本不会出现在圆心
我试图在HTML Canvas绘制的圆圈中间插入一个文本,但它总是出现在中心上方.(我试过基线,但它不起作用).我不想对fillText坐标进行硬编码.
var canvas = document.getElementById('completionStatus');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
context.beginPath();
context.fillStyle = '#B8D9FE';
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fill();
context.strokeStyle = '#ffffff';
context.font = 'bold 130pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'white';
context.fillText('70%', centerX, centerY);
context.stroke();<canvas id="completionStatus" width="400" height="400"></canvas>这是一个小提琴:http://jsfiddle.net/wku0j922/2/
推荐指数
解决办法
查看次数
画布圆看起来模糊
这是对一些过时或不同问题的更新，例如：
我想画一条线，在这条线的末尾应该有一个圆，以生成一条圆线。
因为圆线末端应该在线条的一侧，所以我没有使用line-cap属性。
在我的计算机上使用下面的代码可以正常工作，但可以在iPhone上测试该代码...该行看起来-让说好-来使圆圈看起来像废话： Super blurry!
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.strokeStyle = "red"
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineWidth = 10;
ctx.lineTo(50,100);
ctx.stroke();
ctx.beginPath();
ctx.arc(50, 100, 0.001, 0, 2 * Math.PI, false);
ctx.lineWidth = 10;
ctx.strokeStyle = "green"
ctx.stroke();<div style="position: absolute; margin-left: 25%;display: table; align-self: center; width: 100%;">
<canvas id="canvas"></canvas>
</div>到目前为止，我找不到有效的答案。但是如果有人能够解决我的问题，我将非常高兴。提前致谢。
推荐指数
解决办法
查看次数