textOutput.mdx

title	textOutput
module	环境
submodule	环境
file	src/accessibility/outputs.js
description	<p>在画布上创建屏幕阅读器可访问的图形描述。</p> <p><code>textOutput()</code> 在网页中添加概括性描述、图形列表以及图形表格。 概括性描述包含画布尺寸、画布颜色和图形数量。例如： <code>Your output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:</code>。</p> <p>然后添加图形列表，它描述了图形的颜色、位置和面积。例如： <code>a red circle at middle covering 3% of the canvas</code>。选中图形可获取更多详细信息。</p> <p><code>textOutput()</code> 将图形表格用作列表，表格描述了形状、颜色、位置、坐标和面积。例如： <code>red circle location = middle area = 3%</code>。这不同于 <a href="./gridOutput">gridOutput()</a>, 它是将图形表格用作网格。</p> <p><code>display</code> 这个参数是可选项，它决定了描述的展示方式。 如果它的值是 <code>LABEL</code> ，例如： <code>textOutput(LABEL)</code>, 描述将会展示在画布旁边的 div 元素中。 <code>LABEL</code> 并没有实际用处，它只是屏幕阅读器中的重复项。 仅在开发环境中使用 <code>LABEL</code>。 如果是 <code>FALLBACK</code> , 例如： <code>textOutput(FALLBACK)</code>, 描述仅对屏幕阅读器可见，这是默认模式。</p> <p>了解更多关于制作无障碍绘图的信息，请参阅 <a href="/tutorials/writing-accessible-canvas-descriptions/">编写无障碍的画布描述</a>。</p>
line	10
isConstructor	false
itemtype	method
example	<div> <code> function setup() { // Add the text description. textOutput(); // Draw a couple of shapes. background(200); fill(255, 0, 0); circle(20, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle and a blue square on a gray background.'); } </code> </div> <div> <code> function setup() { // Add the text description and // display it for debugging. textOutput(LABEL); // Draw a couple of shapes. background(200); fill(255, 0, 0); circle(20, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle and a blue square on a gray background.'); } </code> </div> <div> <code> function draw() { // Add the text description. textOutput(); // Draw a moving circle. background(200); let x = frameCount * 0.1; fill(255, 0, 0); circle(x, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle moves from left to right above a blue square.'); } </code> </div> <div> <code> function draw() { // Add the text description and // display it for debugging. textOutput(LABEL); // Draw a moving circle. background(200); let x = frameCount * 0.1; fill(255, 0, 0); circle(x, 20, 20); fill(0, 0, 255); square(50, 50, 50); // Add a general description of the canvas. describe('A red circle moves from left to right above a blue square.'); } </code> </div>
class	p5
params	name description type optional display <p>FALLBAC 或 LABEL</p> 常量 true
chainable	false

textOutput