在html5的画布上,怎么使文字变大并加粗显示?

html-css018

在html5的画布上,怎么使文字变大并加粗显示?,第1张

canvas有一个font属性,用font属性先设定好文字的字体,加粗,倾斜,字号,然后用fillText 或者strokeText插入文字就好了,

给个例子:

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

window.onload=function () {

var content = document.getElementById("canvas")

var cxt = content.getContext("2d")

cxt.font = "bold 30px Arial"

//fillText方式

cxt.fillText("随便写点儿啥", 50, 50)

}

</script>

</head>

<body>

<canvas id="canvas" width="300" height="300"></canvas>

</body>

</html>

可以用css改变字体的大小和颜色。

1、新建html文件,在body标签中添加文字,这里以p标签内容为“演示文本”为例,这时网页将会显示字体默认大小和颜色:

2、在head标签中添加style标签给页面设置css样式,选择p标签,字体大小用的是“font-size”属性,属性值为字体大小,这里以“30px”为例,这时“演示文本”字体将会变大:

3、选择p标签,字体颜色用的是“color”属性,属性值为颜色,这里以红色“red”为例,这时“演示文本”字体将会变成红色:

可能样式表<style>标签中,设置了b标签的字体不为粗体,或其它样式表,在层叠或继承的影响导致不能加精,你可以用<b style="font-weight:bold"></b>试试看看行不行,如不行的话,在IE8或chrome游览器按下F12键,调出开发者工具,可以查看哪些影式表影响到他,从而找出问题。