html

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300</title>
 <style>
 body {
 background: skyblue;
 }
 #canvas {
 margin: 10px;
 padding: 10px;
 background: white;
 border: thin inset gray;
 }
 </style>
 </head>
 <body>
 <canvas id='canvas' width='600' height='300'>
 Canvas not supported
 </canvas>
 <script src='example.js'></script>
 </body>
</html>

js

var canvas = document.getElementById('canvas'),
 context = canvas.getContext('2d');
//????????
context.font = '38px Arial'; 
//??????????
context.fillStyle = 'red';
//?????????????
context.strokeStyle = 'blue'; 
//?????
context.fillText("???????365", canvas.width/2 - 150,canvas.height/2 + 15);
//??????
context.strokeText("???????365", canvas.width/2 - 150,canvas.height/2 + 15 );

???????

?????????????????????????????????????

???????????????????

???

????????????????????????￡??????л??

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

高薪前端必备，后端工程师带你学canvas，第一节:图片上绘制字体

html

js

???????

???