canvas中可以用fillText绘出文字例如lthtmlltbody ltcanvasid=quotmyCanvasquotwidth=quot300quotheight=quot150quotstyle=quotborder1pxsolid#d3d3d3quot YourbrowserdoesnotsupporttheHTML5canvastagltcanvas ltscript varc=quotmyCanvasquotvarctx=cgetContextquot2dquot=quot20pxGeorgiaquotquotHelloWorld！quot，10，50。

1 将Font Awesome 的字体文件拷贝到服务器的字体目录里面 2 设置Canvas 的字体， ctxfont=quot12px fontawesomequot3 调用Canvas API ctxfillTexttext，x，y 这里text 就是 图标的Unicode结果显示的就是Unicode代表的图标了其他相关的技巧 1 如果没有权限或者不想拷贝字体到服务器的字体目录。

估计你刚学javascript吧，return不能用在“外部”return需要在“函数内部”function test var canvas = documentquerySelector#39canvas#39 if ！canvas alert#39浏览器不支持#39 consolelogcanvastestlthtmlltheadltheadltbodyltcanvas id=quotmyCanvasquotltcanvasltscri。

HTML5还没那么多API这个你要用其他语言来解析，然后再载入HTML5呈现直接HTML5是没办法的。

canvas有一个font属性，用font属性先设定好文字的字体，加粗，倾斜，字号，然后用fillText 或者strokeText插入文字就好了，给个例子lt！DOCTYPE HTML lthtml lthead ltscript type=quottextjavascriptquot windowonload=function var content = documentgetElementByIdquotcanvasquotvar cxt = content。

#39body#39append#39不支持canvas#39 将上述代码粘贴到indexhtml文件的适当位置这里使用了jQuery的`$#39body#39append`方法来向页面添加相应的文本信息如果浏览器支持HTML5 Canvas，页面将显示“支持canvas”若不支持，则显示“不支持canvas”这种简单直接的方法可以帮助开发者快速了解浏览器。

1首先，打开html编辑器，新建html文件，例如indexhtml2在indexhtml中的ltbody标签中，输入js代码try documentcreateElementquotcanvasquotgetContextquot2dquot#39body#39append#39支持canvas#39 catch e #39body#39append#39不支持canvas#39 3浏览器运行indexhtml页面，此时。

首先save是保存当前状态，restore是返回上一次保存的状态你画出quot文字1quot，后旋转，后返回相当于没有旋转，最后才画quot文字2quot，所以两次文字都不旋转其次rotate的参数不是角度制，而是弧度制MahtPI相当于180度所以要旋转30角度必须这样写crotateMathPI6再次旋转之后的方向。

本文实例讲述了js+html5实现canvas绘制镂空字体文本的方法分享给大家供大家参考具体实现方法如下lt！DOCTYPE html lthtml ltbody ltcanvas id=quotmyCanvasquotwidth=quot200quotheight=quot100quotstyle=quotborder1px solid d3d3d3quot Your browser does not support the HTML5 canvas tagltcanvas ltscript。

1 关于toDataURLtype， ratio函数，参数type在imagepng，imagejpeg，imagesvg+xml等 MIME类型中选择可以不填，默认是imagepng如果是type = “imagejpeg”，可以有第二个参数，如果第二个参数ratio的值在01之间，则表示JPEG的质量等级，否则使用浏览器内置默认质量等级2 关于getImage。

html5中的canvas本身的API是不存在图层概念的要想实现实现多图层功能，必须要使用多个canvas对象，不过这些canvas对象，是在内存中的，而不是在html的元素树中每个canvas维持一个图层就可以，然后主canvas是负责显示最后的合成的效果js动态创建canvas对象如下var layer1=documentcreateElement#39canvas#39。

如果是用IE的话，只有IE9及以上才支持可以使用傲游3进行浏览。

多个 canvas 可以重叠，分别用 styledisplay = #39#39 来隐藏，只留一个显示HTML5 canvas 是透明的多个重叠的 canvas 可以同时显示，实现多层 layer还可以控制涂色的透明度，产生半透明覆盖效果我曾用这种方式制造出玻璃效果，看上去很美。

擦除canvas画布有两个方法可以使用clearRect方法 重新设置高宽度 示例* 本示例使用jQuery描述 *var canvas = $#39#myCanvas#39 选择要擦除的canvas元素var context = canvasget0getContext#392d#39 获取canvas上下文第一种方法擦除clearRect方法contextclearRect0， 0。

不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，GitHub上有一个hidpicanvaspolyfill可以很好的解决这个问题，但是没有对图片进行处理如果你了解了原因，解决这个问题也很容易\x0d\x0a首先，引入上方这个polyfill\x0d\x0a然后，得到devicePixelRatio和backingStorePixelRatio的比例。

该对象提供了用于在画布上绘图的方法和属性本手册提供完整的 getContextquot2dquot 对象属性和方法，可用于在画布上绘制文本线条矩形圆形等等正如上面所说，你需要制作无数的规则图形组合到一起变成不规则图形操作可以说是相当复杂建议你可以用HYPE3实验下，如果你想做HTML5动画的话。

它可以用来制作照片集或者制作简单也不是那么简单的动画，甚至可以进行实时视频处理和渲染在html中，canvas标签用来定义图形，比如图表和其他图像，必须使用脚本来绘制图形，例如在画布上画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字1什么是canvas？HTML5canvas元素用于图形的绘制，通过脚本。