canvas可以画图，也可以写文字，下面是文字的相关用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: #000;
}
canvas{
background:#fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
var oC = document.getElementById("canvas1");
var gd = oC.getContext("2d");
gd.strokeStyle = "green";
gd.fillStyle = "orange";
gd.font = '50px 黑体';
gd.strokeText("文字边框",200,200);
//文字填充加边框
gd.fillText("文字填充",200,300);
gd.strokeText("文字填充",200,300);
},false);
</script>
</head>
<body>
<canvas id="canvas1" width="600" height="500">
浏览器需要更新！！！
</canvas>
</body>
</html>
效果图：
Paste_Image.png
<script>
document.addEventListener("DOMContentLoaded",function(){
var oC = document.getElementById("canvas1");
var gd = oC.getContext("2d");
//文字水平对齐
gd.textBaseline = 'top';
//文字垂直对齐
gd.textAlign = 'right';
gd.strokeStyle = "green";
gd.fillStyle = "orange";
//字体属性
gd.font = '50px 宋体';
gd.fillText("文字位置",200,300);
gd.strokeText("文字位置",200,300);
//画横线
gd.beginPath();
gd.lineWidth = 1;
gd.strokeStyle = "black";
gd.moveTo(0, 300);
gd.lineTo(oC.width, 300);
gd.stroke();
//画竖线
gd.beginPath();
gd.moveTo(200, 0);
gd.lineTo(200, oC.height);
gd.stroke();
},false);
</script>
效果图：
Paste_Image.png
1、strokeText：边框文字
Paste_Image.png
2、fillText：填充文字，用法同strokeText
3、textBaseline：文字水平对齐
Paste_Image.png
各个属性的效果：
Paste_Image.png
4、textAlign：文字垂直对齐
Paste_Image.png
各个属性的效果：
Paste_Image.png
注：以上表格来自w3c
737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
