html5怎么在实心圆写文字

html5怎么在实心圆写文字,第1张

html5在实心圆写文字的方法如下:

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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6306906.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-20
下一篇 2023-03-20

发表评论

登录后才能评论

评论列表(0条)

保存