码迷,mamicode.com
首页 > 其他好文 > 详细

canvas学习绘制文字

时间:2017-02-15 15:11:33      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:font   getc   htm   false   lan   doctype   har   gre   char   

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

标签:font   getc   htm   false   lan   doctype   har   gre   char   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!