首页 > 其他 > 详细

canvas学习绘制文字

时间:2017-02-15 15:09:04      阅读:207      评论:0      收藏:0      [点我收藏+]

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学习绘制文字

原文:http://www.cnblogs.com/liao13160678112/p/6401102.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!