首先我们需要在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