html绘制到canvas,html中canvas的应用实例

　　一、绘制文本

　　在绘图环境中提供了两种方法在帆布中绘制文本。

　　strokeText(text，x，y):在(x，y)处绘制空心的文本。

　　fillText(text，x，y) : (x，y)处绘制实心的文本。二、在canvas中绘制文本复制代码代码如下：

　　！声明文档类型

　　超文本标记语言

　　头

　　meta http-equiv= Content-type Content= text/html；charset=utf-8

　　titleHTML5/title

　　脚本类型=文本/javascript 字符集=utf-8

　　//这个函数将在页面完全加载后调用

　　函数页面已加载()

　　{

　　//获取帆布对象的引用，注意画布对象名字必须和下面身体里面的编号相同

　　var canvas=文档。getelementbyid( tcan vas )；

　　//获取该帆布的2D绘图环境

　　var context=画布。获取上下文(“2d”)；

　　//绘制代码将出现在这里

　　//绘制文本

　　context.fillText(欢迎来到杜军博客,100,40);

　　//修改字体

　　context.font= 20px Arial

　　context.fillText(欢迎来到杜军博客,100,100);

　　//绘制空心的文本

　　context.font=36px隶书；

　　context.strokeText(欢迎来到笃军的博客,100,200);

　　}

　　/脚本

　　/头

　　body onload= page loaded()；

　　canvas width= 500 height= 300 id= tcan vas style= border:black 1px solid；

　　！-如果浏览器不支持则显示如下字体-

　　提示：你的浏览器不支持帆布标签

　　/画布

　　/body

　　/html三、绘制效果

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。