|
两种方法： fillText strokeText 填充：context.fillText(text,x,y,maxwidth); 轮廓：context.strokeText(text,x,y,maxwidth); html部分： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drawText</title>
<script type="text/javascript" src="drawText.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas')"><!--draw('canvas')这个canvas少了单引号，那么画布便不会出现-->
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
javascript部分： function draw(id) {
var canvas =document.getElementById(id);
var context=canvas.getContext('2d');
context.fillStyle='#f1f2f3';
context.fillRect(0,0,500,300);
context.strokeStyle='green';
context.fillStyle='green';
context.font=" bold 40px 微软雅黑";
context.textBaseline='top';/*文字对齐*/
context.textAlign='start';
context.fillText('融水公子很帅lalala',10,50,800);
context.fillText('融水公子很帅lalala',50,120,800);
context.fillText('en',350,160,800);
//context.strokeText('融水公子很帅',50,100,800);
}
效果图： 分享知识，分享快乐！希望中国站在编程之巅！ ----融水公子 公众微信号：rsgz520 360图书馆馆号：rsgz002.360doc.com
|
