1、创建一个画布,设置宽度和高度。
2、获取到元素,varcanvas=document.getElementById("canvas")。
3、创建context对象,varctx=canvas.getContext("2d")。
4、设置绘制文本的字体和字体大小,ctx.font="40px微软雅黑"。
5、在画布上绘制实心的文本,其中三个参数含义是:第一个是绘制的文本,第二个是绘制文本横坐标起始坐标,第三个是纵坐标的起始坐标,ctx.fillText("HTML5",200,200)。
HTML5 Canvas的文本设置字体和大小,可以使用的字体在画布范围内的属性。下面是一个简单的实例,基本语法:
context.font=[value]
HTML5 Canvas Text Font &Size 例子
<!DOCTYPE HTML>
<html>
<head>
<title>html5_canvas_text_size</title>
<style>
body {margin: 0pxpadding: 0px}
#myCanvas {border: 1px solid #9C9898margin:0 automargin-top:200pxmargin-left:100px}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d")
var x = 150
var y = 100
context.font = "40pt Calibri"
context.fillText("Hello WEBJX!", x, y)
}
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200">
</canvas>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)