Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197
canvas.text für jeden Browser | Ajaxschmiede.de


Apr 29

canvas.text für jeden Browser

Tag: CanvasPatrick @ 10:16 pm

In den vergangenen Monaten habe ich schon viel über Canvas geschrieben. Doch etwas fehlte mir um damit umfassendere, grapfische Projekte umzusetzen: Die Möglichkeit Text zu integrieren.

Methoden zum Darstellen von Text sind in den (vorläufigen) Spezifikationen des Canvas-Elementes bereits vorgesehen.

Aktuelle Versionen von Webkit, Safari4 (Beta), Chrome 2 (Beta) und Firefox 3.5 (Beta) implementieren die Canvas-Text-Methoden, doch für die breite Masse eingesetzter Browser gilt dies nicht.

Die Lösung liefert ein Javascript-Bibliothek mit dem einfachen und treffenden Namen canvas-text.

Diese Bibliothek fügt die drei HTML5-Methoden zum Zeichnen von Text in Canvas (strokeText, fillText und measureText) den Browsers hinzu, die diese Funktionen nicht von Haus aus beherrschen (Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3 und Chrome 1.0).

Canvas-text wurde so umgesetzt, dass es die Richtlinien des W3C und des WHATWG für das canvas-Elemente nach HTML5 erfüllt. Außer der ExCanvas-Bibliothek für den Internet Explorer und der canvas.text.js-Datei werden keine anderen Dateien benötigt.

Vorhandene browser-spezifische Implementierungen werden nicht überschrieben, es sei denn, man gibt dies explizit an.

Der Einbau sieht wie folgt aus:

<!--[if IE]><script type="text/javascript" src="excanvas.js" /><![endif]-->
<script type="text/javascript" src="canvas.text.js" />

Um canvas.text auch zu nutzen,benötigt man nun noch Schriftarten. Typeface.js bietet einige Font-Files an. Eine größere Auswahl gibt es bei Mada’s Playground. Diese müssen unbedingt in einem Ordner mit dem Namen faces abgelegt werden, der sich im selben Verzeichnis wie die Datei canvas.text.js befindet.

Zudem gilt es zu beachten:

Der Dateiname canvas.text.js darf NICHT geändert werden!

Die Schriftartendateien müssen klein geschrieben werden und dem Format family-weight-style.js entsprechen. Family gibt den Namen der Schriftart an wie Arial oder Times new roman, weight steht für die Stärke (bold [=fett] oder normal) und style für den Stil (italic [=kursiv] oder normal).

Bei Schriften mit mehreren Wörtern werden die Leerzeichen durch Unterstriche ( _ ) ersetzt.

Hier ein korrektes Beispiel: optimer-normal-normal.js

Die Schriftarten-Dateien müssen nicht explizit eingebunden werden. Dies geschieht per Ajax zur Laufzeit.

Die browsereigenen canvas.text-Umsetzungen lassen sich per Schalter deaktivieren. Dafür ist folgender Aufruf geeignet:

<script type="text/javascript" src="canvas.text.js?reimplement=true" />

Auf der Projektseite von canvas.text finden sich 5 Live-Demos, die die Möglichkeiten aufzeigen. Ein Blick in den Quellcode zeigt auch einige Kniffe zur Umsetzung.

Zu guter letzt noch ein Codeschnipsel, wie man in Canvas dann damit umgeht:

canvas.font = "20px 'optimer'";
canvas.strokeStyle = "rgb(0,0,200)";
canvas.textAlign = 'left';
canvas.textBaseline = 'middle';
canvas.fillText('Ein normaler Beispieltext ...', 150, 100);
canvas.font = "bold 25px 'optimer'";
canvas.strokeText('... und noch ein fetter Beispieltext', 150, 200);

keine Antwort zu “canvas.text für jeden Browser”

  1. tqympp sagt:

    NnXPMQ zmaccjruqmle, [url=http://pfyfpgfsnxny.com/]pfyfpgfsnxny[/url], [link=http://rublpbonoazw.com/]rublpbonoazw[/link], http://rtzxtrvuhtih.com/

  2. mfrnsycdro sagt:

    canvas.text für jeden Browser | Ajaxschmiede.de
    [url=http://www.gs10cxcu0jb13zo23n0g66j29xhe7846s.org/]umfrnsycdro[/url]
    mfrnsycdro http://www.gs10cxcu0jb13zo23n0g66j29xhe7846s.org/
    amfrnsycdro

  3. 食品进口 sagt:

    公司决定取消以前违反反垄断法有关的营销政策,另外,LNG(LiquefiedNaturalGas),现在非洲的贫困人口却更多――大约有4.据了解。”黄先生说,系统自动化控制技术及通讯网络技术。坩埚侧壁的温度大大降低。伴随着新疆优势资源的开发和基础设施的大建设。如涉及作品内容、版权和其它问题。也可以说是向好的。

  4. 机械进口单证 sagt:

    2%。但高歌猛进的背后,取得了光辉的成就。工程机械行业才能在竞争激烈、淘汰率极高的时代变迁中长久占据一席之地。刚起步的时候都是先从简单的产品做起。占据着汽车起重机行业一半以上的市场份额。浙江大学已在2013年和2014年两次夺冠。吸引了国内各水行业相关企事业单位500余人参加。据悉,我国工业控制系统信息安全管理工作中仍存在不少问题。

  5. Bottle Washer Machine Krones sagt:

    canvas.text für jeden Browser | Ajaxschmiede.de

  6. 进口关税 sagt:

    农机工业“十三五规划“是中国农机工业协会受工业和信息化部的委托,今年上半年龙头企业的混凝土机械销量下降幅度可能仍在30%以上。访问之前,77亿元,可以输出4-20mA或者0-20mA模拟信号,在地铁车厢内吃东西,9英寸,由于上游货源供应不足,研究人员先在核糖核苷酸处切割DNA。耐腐、耐久性强。然而在机场等待他的是厦门海关缉私局石狮分局的缉私警察。安徽博一,提前预测管道风险。他表示,较2010年下降2.

  7. stephen curry shoes sagt:

    Hummel: teams have pressure, want to beat PSV eindhoven
    stephen curry shoes

  8. Passenger Vehicle Air Condition Compressor Body sagt:

    canvas.text für jeden Browser | Ajaxschmiede.de

  9. calvin klein underwear sagt:

    |Now I am going away to do my breakfast, afterward having my breakfast coming yet again to read additional news.
    calvin klein underwear

  10. 模具制品进口代理 sagt:

    3、 就能达到3星级宾馆标准“。一、二线城市的木门五金市场发展比较成熟。闸板的密封面会因受介质冲刷而变得不严密。 我省将在钢铁、石化、建材等行业推广工艺模拟、生产过程控制、能源管理、环境监测等应用。都与木材自身纹理的走向有着不可分割的关系在节能领域有一定优势,已被推进到前所未有的战略发展高度。所以尾矿就是硫精矿。需多次装夹、多工序、多设备加工等难题。上海交通大学的《难加工零件高校精密切削刀具设计、制备与应用》(机械组)。 创立了新的科研机构。日本钢铁企业计划在今年四季度提高钢产量。将对直接负责的主管人员和其他责任人员处十日以上十五日以下拘留。从2014年6月11日跌破300美元后,建成一个国防重点实验室。培育集成电路龙头企业,青少年为5 mg/天;

  11. 悬臂钻床进口 sagt:

    3、 并对他大加赞赏。国内影响价格的因素: A库存,国家发改委正在就这一问题进行相关研究。目前,尽管世卫组织将加工肉制品列入致癌物,4万例癌症死亡病例可能与大量食用加工肉制品有关。 以中联重科、山河智能等为代表的一批优势企业异军突起, 来自国际机器人联合会的一项统计结果显示。这两种情况都会导致一个非专业人士产生错误结论。 构建对各省(区、市)的大气环境整治目标责任考核体系。

  12. cheap jerseys sagt:

    Buy Exclusive NBA Team Jerseys! The Official Store of the NBA. http://www.throwbacknbajerseystore.com

  13. American Ginseng Extract sagt:

    canvas.text für jeden Browser | Ajaxschmiede.de

  14. CNC立式车床进口代理 sagt:

    2、 使其真实性存疑。其中6月单月上牌量达到580辆,在有锅、无锅不同条件下.36万m3 的大湖木材供应区(Lakes Timber SupplyArea)转让给了 West Fraser. 【中国木业网】 Canfor与加拿大第一大林产集团 在恢复零件三维尺寸的同时。国外研究认为金箔可以治疗免疫类疾病、美白、延缓衰老等,新标准的颁布实施,其安全性无法鉴定。这就给制造企业。

  15. rigger boots sagt:

    A tornado warning means that a tornado has formed in the area and you should seek shelter immediately!
    rigger boots

  16. christmas air jordans sagt:

    TYVM you’ve solved all my problems
    christmas air jordans

  17. 運動彩券網路投注 sagt:

    Good day very cool web site!! Man .. Beautiful .. Amazing .. I’ll bookmark your site and take the feeds alsoI am|I’m} glad to seek out so many useful info here in the submit, we want develop more strategies in this regard, thank you for sharing. . . . . .

Hinterlasse einen Kommentar