canvas学习绘制文字
Posted 菜鸟有觉悟要努力了
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas学习绘制文字相关的知识，希望对你有一定的参考价值。
1.文字的绘制方法
strokeText("文字",x,y,maxWith) 绘制（描边）空心文字
fillText("文字",x,y,maxWith) 绘制实心
字体样式 font(大小 字体 ...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
canvas{background:#A9A9A0;}
</style>
</head>
<body>
<canvas id="bcanvas" width="800" height="800">
您的浏览器暂不支持HTML5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById(‘bcanvas‘);
var pi=canvas.getContext(‘2d‘);
pi.lineWidth=2;
pi.strokeStyle="yellow";
pi.fillStyle="orange";
pi.moveTo(400,500);
pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false);
pi.closePath();
pi.fill();
pi.beginPath();
pi.strokeStyle="orange";
pi.fillStyle="#A9A9A0";
pi.moveTo(400,500);
pi.arc(400,500,150,Math.PI*7/6,Math.PI*11/6,false);
pi.closePath();
pi.fill();
pi.beginPath();
pi.lineWidth=1;
pi.strokeStyle="green";
pi.fillStyle="red";
pi.font="60px 隶书";
pi.strokeText("纵",375,270);
pi.fillText("横",375,340);
pi.strokeText("横",375,340);
pi.font="60px 仿宋"
pi.strokeText("横",375,410);
</script>
</body>
</html>
以上是关于canvas学习绘制文字的主要内容，如果未能解决你的问题，请参考以下文章