blocks|key|931328|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|931329|var+canvas+=+document.getElementById("my-canvas");
var+context+=+canvas.getContext("2d");

context.fillStyle+=+"blue";
context.font+=+"bold+16px+Arial";
context.fillText("Zibri",+(canvas.width+/+2)+-+17,+(canvas.height+/+2)+%2B+8);|code-block|syntax|javascript|931330|#my-canvas+{
++background:+#FF0;
}|931331|<canvas+id="my-canvas"+width="200"+height="120"></canvas>|931332|931333|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("my-canvas");
var context = canvas.getContext("2d");

context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#my-canvas {
  background: #FF0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="my-canvas" width="200" height="120"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>


blocks|key|931479|text|Drawing+text+on+a+Canvas|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|931480|标记：|931481|<canvas+id="myCanvas"+width="300"+height="150"></canvas>|code-block|syntax|javascript|931482|脚本(有几个不同的选项)：|931483|<script>
++++var+canvas+=+document.getElementById('myCanvas');
++++var+ctx+=+canvas.getContext('2d');
++++ctx.font+=+'italic+18px+Arial';
++++ctx.textAlign+=+'center';
++++ctx.+textBaseline+=+'middle';
++++ctx.fillStyle+=+'red';++//+a+color+name+or+by+using+rgb/rgba/hex+values
++++ctx.fillText('Hello+World!',+150,+50);+//+text+and+position
</script>|931484|查看MDN+documentation和这个JSFiddle示例。|931485|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text|1|https://developer.mozilla.org/en-US/docs/Drawing_text_using_a_canvas|2|http://jsfiddle.net/liormb/3D2SK/^0|0|O|0|0|0|0|0|0|2|H|1|M|8|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]|$A|1E|B|1F|1|1G]]|C|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

<h1><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text" rel="nofollow noreferrer">Drawing text on a Canvas</a></h1>
<p>Markup:</p>
<pre><code>&lt;canvas id=&quot;myCanvas&quot; width=&quot;300&quot; height=&quot;150&quot;&gt;&lt;/canvas&gt;
</code></pre>
<p>Script (with few different options):</p>
<pre><code>&lt;script&gt;
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.font = 'italic 18px Arial';
    ctx.textAlign = 'center';
    ctx. textBaseline = 'middle';
    ctx.fillStyle = 'red';  // a color name or by using rgb/rgba/hex values
    ctx.fillText('Hello World!', 150, 50); // text and position
&lt;/script&gt;
</code></pre>
<p>Check out the <a href="https://developer.mozilla.org/en-US/docs/Drawing_text_using_a_canvas" rel="nofollow noreferrer">MDN documentation</a> and this <a href="http://jsfiddle.net/liormb/3D2SK/" rel="nofollow noreferrer">JSFiddle</a> example.</p>


blocks|key|1145806|text|Canvas+text支持实际上非常好--你可以控制font，size，color，horizontal+alignment，vertical+alignment，你还可以获得文本度量来获得以像素为单位的文本宽度。此外，您还可以使用canvas+transforms来rotate、stretch甚至invert文本。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1145807|entityMap^0|0|6|Q|4|V|4|10|5|16|K|1R|I|3F|A|3Q|6|3X|7|46|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|G|$]]

<p><code>Canvas</code> text support is actually pretty good - you can control <code>font</code>, <code>size</code>, <code>color</code>, <code>horizontal alignment</code>, <code>vertical alignment</code>, and you can also get text metrics to get the text width in pixels. In addition, you can also use canvas <code>transforms</code> to <code>rotate</code>, <code>stretch</code> and even <code>invert</code> text.</p>


blocks|key|1145884|text|在画布上写文本真的很容易。目前还不清楚您是否希望有人在HTML页中输入文本，然后将该文本显示在画布上，或者您是否要使用JavaScript将信息写入屏幕。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1145885|下面的代码会将一些不同字体和格式的文本写入到画布中。当您想要测试在画布上书写的其他方面时，您可以对此进行修改。|1145886|+<canvas+id="YourCanvasNameHere"+width="500"+height="500">Canvas+not+supported</canvas>

+var+c+=+document.getElementById('YourCanvasNameHere');
+var+context+=+c.getContext('2d');+//returns+drawing+functions+to+allow+the+user+to+draw+on+the+canvas+with+graphic+tools.+|code-block|syntax|javascript|1145887|您可以将画布ID标记放在HTML中，然后引用该名称，也可以在JavaScript代码中创建画布。我认为在大多数情况下，我会在HTML代码中看到<canvas>标记，有时还会在JavaScript代码中动态创建它。|offset|length|style|CODE|1145888|代码：|1145889|++var+canvas+=+document.getElementById('myCanvas');
++var+context+=+canvas.getContext('2d');

++context.font+=+'bold+10pt+Calibri';
++context.fillText('Hello+World!',+150,+100);
++context.font+=+'italic+40pt+Times+Roman';
++context.fillStyle+=+'blue';
++context.fillText('Hello+World!',+200,+150);
++context.font+=+'60pt+Calibri';
++context.lineWidth+=+4;
++context.strokeStyle+=+'blue';
++context.strokeText('Hello+World!',+70,+70);|1145890|entityMap^0|0|0|0|1Z|8|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>It is really easy to write text on a canvas. It was not clear if you want someone to enter text in the HTML page and then have that text appear on the canvas, or if you were going to use JavaScript to write the information to the screen.</p>

<p>The following code will write some text in different fonts and formats to your canvas. You can modify this as you wish to test other aspects of writing onto a canvas.</p>

<pre><code> &lt;canvas id="YourCanvasNameHere" width="500" height="500"&gt;Canvas not supported&lt;/canvas&gt;

 var c = document.getElementById('YourCanvasNameHere');
 var context = c.getContext('2d'); //returns drawing functions to allow the user to draw on the canvas with graphic tools. 
</code></pre>

<p>You can either place the canvas ID tag in the HTML and then reference the name or you can create the canvas in the JavaScript code. I think that for the most part I see the <code>&lt;canvas&gt;</code> tag in the HTML code and on occasion see it created dynamically in the JavaScript code itself.</p>

<p>Code:</p>

<pre><code>  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.font = 'bold 10pt Calibri';
  context.fillText('Hello World!', 150, 100);
  context.font = 'italic 40pt Times Roman';
  context.fillStyle = 'blue';
  context.fillText('Hello World!', 200, 150);
  context.font = '60pt Calibri';
  context.lineWidth = 4;
  context.strokeStyle = 'blue';
  context.strokeText('Hello World!', 70, 70);
</code></pre>


blocks|key|931285|text|我想这取决于你想用它做什么。如果你只是想写一些普通的文本，你可以使用.fillText()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|931286|entityMap^0|Y|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Depends on what you want to do with it I guess. If you just want to write some normal text you can use <code>.fillText()</code>.</p>


blocks|key|931341|text|我找到a+good+tutorial+on+oreilly.com了。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|931342|示例代码：|931343|<canvas+id="canvas"+width+='600px'></canvas><br+/>
Enter+your+Text+here+.The+Text+will+get+drawn+on+the+canvas<br+/>
<input+type="text"+id="text"+onKeydown="func();"></input><br+/>
</body><br+/>
<script>
function+func(){
var+e=document.getElementById("text"),t=document.getElementById("canvas"),n=t.getContext("2d");
n.fillStyle="#990000";n.font="30px+futura";n.textBaseline="top";n.fillText(e.value,150,0);n.fillText("thank+you,+",200,100);
n.fillText("Created+by+ashish",250,120)
}
</script>|code-block|syntax|javascript|931344|礼节：@Ashish+Nautiyal|931345|entityMap|0|LINK|mutability|MUTABLE|url|http://chimera.labs.oreilly.com/books/1234000001654/ch03.html#using_measuretext^0|3|U|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>I found <a href="http://chimera.labs.oreilly.com/books/1234000001654/ch03.html#using_measuretext" rel="nofollow">a good tutorial on oreilly.com</a>.</p>

<p>Example code:</p>

<pre><code>&lt;canvas id="canvas" width ='600px'&gt;&lt;/canvas&gt;&lt;br /&gt;
Enter your Text here .The Text will get drawn on the canvas&lt;br /&gt;
&lt;input type="text" id="text" onKeydown="func();"&gt;&lt;/input&gt;&lt;br /&gt;
&lt;/body&gt;&lt;br /&gt;
&lt;script&gt;
function func(){
var e=document.getElementById("text"),t=document.getElementById("canvas"),n=t.getContext("2d");
n.fillStyle="#990000";n.font="30px futura";n.textBaseline="top";n.fillText(e.value,150,0);n.fillText("thank you, ",200,100);
n.fillText("Created by ashish",250,120)
}
&lt;/script&gt;
</code></pre>

<p>courtesy: @Ashish Nautiyal </p>


blocks|key|931432|text|将文本写入画布是很容易的。假设你的canvas声明如下。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|931433|<html>
++<canvas+id="YourCanvas"+width="500"+height="500">
+++Your+Internet+Browser+does+not+support+HTML5+(Get+a+new+Browser)
++</canvas>
</html>|code-block|syntax|javascript|931434|这部分代码将一个变量返回到canvas中，这是您的canvas在HTML中的表示形式。|931435|++var+c++=+document.getElementById("YourCanvas");|931436|下面的代码将用于绘制线条、文本、填充的方法返回到画布。|931437|++var+ctx+=+canvas.getContext("2d");

<script>
++ctx.font="20px+Times+Roman";
++ctx.fillText("Hello+World!",50,100);

++ctx.font="30px+Verdana";

++var+g+=+ctx.createLinearGradient(0,0,c.width,0);

++g.addColorStop("0","magenta");
++g.addColorStop("0.3","blue");
++g.addColorStop("1.0","red");

++ctx.fillStyle=g;+//Sets+the+fille+of+your+text+here.+In+this+case+it+is+set+to+the+gradient+that+was+created+above.+But+you+could+set+it+to+Red,+Green,+Blue+or+whatever.

++ctx.fillText("This+is+some+new+and+funny+TEXT!",40,190);
</script>|931438|亚马逊上有一份kindle+http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5%2Bcanvas%2Bbeginners的初学者指南，物有所值。我几天前买了它，它向我展示了许多非常有用的简单技术。|offset|length|931439|entityMap|0|LINK|mutability|MUTABLE|url|https://rads.stackoverflow.com/amzn/click/com/B00JSFVY9O^0|0|0|0|0|0|0|E|3Z|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>It is easy to write text to a canvas. Lets say that you canvas is declared like below.</p>

<pre><code>&lt;html&gt;
  &lt;canvas id="YourCanvas" width="500" height="500"&gt;
   Your Internet Browser does not support HTML5 (Get a new Browser)
  &lt;/canvas&gt;
&lt;/html&gt;
</code></pre>

<p>This part of the code returns a variable into canvas which is a representation of your canvas in HTML.</p>

<pre><code>  var c  = document.getElementById("YourCanvas");
</code></pre>

<p>The following code returns the methods for drawing lines, text, fills to your canvas.</p>

<pre><code>  var ctx = canvas.getContext("2d");

&lt;script&gt;
  ctx.font="20px Times Roman";
  ctx.fillText("Hello World!",50,100);

  ctx.font="30px Verdana";

  var g = ctx.createLinearGradient(0,0,c.width,0);

  g.addColorStop("0","magenta");
  g.addColorStop("0.3","blue");
  g.addColorStop("1.0","red");

  ctx.fillStyle=g; //Sets the fille of your text here. In this case it is set to the gradient that was created above. But you could set it to Red, Green, Blue or whatever.

  ctx.fillText("This is some new and funny TEXT!",40,190);
&lt;/script&gt;
</code></pre>

<p>There is a beginners guide out on Amazon for the kindle <a href="https://rads.stackoverflow.com/amzn/click/com/B00JSFVY9O" rel="nofollow noreferrer" rel="nofollow noreferrer">http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&amp;qid=1398113376&amp;sr=8-4&amp;keywords=html5+canvas+beginners</a> that is well worth the money. I purchased it a couple of days ago and it showed me a lot of simple techniques that were very useful.</p>


问如何在HTML5画布元素上编写文本？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML5画布元素上编写文本？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML5画布元素上编写文本？
EN