在“html5”的画布上怎么使文字变大并加粗显示？

html-css05

在“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>

你好，将图片绘制到canvas之后，原图片上的所有属性和方法以及时间在canvas上的图片上都将不再产生作用，因为图片在canvas是以像素的形式存在，而不是DOM元素。如果一定要用，这需要将时间绑定到canvas上，并且画板上的内容清除之后再重新绘制一幅带有边框的图片（这里需要作一些绘图运算）