文字"/>
canvas Seven 文字
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.png1、strokeText：边框文字
Paste_Image.png
2、fillText：填充文字，用法同strokeText
3、textBaseline：文字水平对齐
Paste_Image.png
各个属性的效果： Paste_Image.png
4、textAlign：文字垂直对齐
Paste_Image.png
各个属性的效果： Paste_Image.png
注：以上表格来自w3c
更多推荐
canvas Seven 文字
发布评论