相关疑难解决方法(0)

能够将常规元素临时转换为a非常有用canvas.例如,假设我有一个div我要翻转的样式.我想动态创建一个画布,"渲染" HTMLElement到画布中,隐藏原始元素并为画布设置动画.

可以吗？

我有一个<div style="border:1px solid border;" />和帆布,使用以下方式绘制:

context.lineWidth = 1;
context.strokeStyle = "gray";

绘图看起来相当模糊(lineWidth小于1创建更糟糕的图片),并且没有任何接近div的边界.是否可以使用画布获得与HTML相同的绘图质量？

var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2, 2);
ctx.lineTo(98, 2);
ctx.lineTo(98, 98);
ctx.lineTo(2, 98);
ctx.lineTo(2, 2);
ctx.stroke();

div {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
canvas, div {background-color: #F5F5F5;}
canvas {border: 1px solid white;display: block;}

<table>
<tr><td>Line on canvas:</td><td>1px border:</td></tr>
<tr><td><canvas id="canvas" width="100" height="100"/></td><td><div>&nbsp;</div></td></tr>
</table>

将文本拟合到网站上的圆圈会是一个很好的解决方案,因此它会与圆形曲线一起流动,而不是矩形边界框？

这就是我想要实现的目标:页面上有许多黑色圆圈(固定大小),每个圆圈旁边都有一个textarea.当文本输入到文本区域时,它将显示在黑色圆圈中,它以两个轴为中心.如果输入的文本太多,那么该行变得比圆的半径长,减去指定的边距值,该行将像您期望的那样在常规包装中断开,文本块仍然居中.当然,靠近顶部或底部的线将比靠近中间的线更短.

文本将具有固定大小,当圆圈填充文本时,不应显示额外内容(如溢出隐藏).

带有文字的黑色圆圈实际上是气泡,意图打印并粘贴在海报上.

任何奇妙的SVG/Canvas库都支持这个或者我必须从头开始计算我们的方法吗？