欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  首先我们需要在HTML页面中使用canvas标签创建一个画布,设置其id值为myCanvas。
 
  <canvasid="myCanvas"></canvas>
 
  然后使用JavaScript在画布中绘制文本图形
 
  1、获取到canvas控件
 
  varcanvas=document.getElementById("myCanvas");//查找画布元素
 
  2、使用getContext()方法配置绘图的环境,创建绘图对象
 
  varctx=canvas.getContext("2d");
 
  3、通过fillText方法来在canvas里写上文本,参数分别为文本内容,和文本所在的位置。
 
  我们也可以使用font属性来设置一下文本的字体大小和字体类型。
 
  ctx.font="20px微软雅黑";
 
  ctx.fillText('PHP中文网',20,20,200);
 
  效果图:
 
  2.jpg
 
  可以看到现在页面上显示的文本是默认的黑色文字。
 
  3、想要设置文本的字体颜色,就需要使用fillStyle属性,这个属性可以接受一个颜色的代码值,比如#cc0000,也可以接受一个颜色的英文单词,比如red。
 
  ctx.fillStyle="red";
 
  完整js代码:
 
  <canvasid="myCanvas"></canvas>
 
  <scripttype="text/javascript">
 
  varcanvas=document.getElementById("myCanvas");//查找画布元素
 
  varctx=canvas.getContext("2d");
 
  ctx.font="20px微软雅黑";
 
  ctx.fillStyle="red";
 
  ctx.fillText('PHP中文网',20,20,200);
 
  </script>







本文转载自中文网
 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h55743.shtml