|
兩種方法： 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')這個(gè)canvas少了單引號，那么畫布便不會出現(xiàn)-->
<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
|
