网站首页 > 技术文章正文

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

ins518 2024-10-11 16:36:41 技术文章 32 ℃ 0 评论

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 );

???????

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

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

???

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

上一篇：零基础教你学前端——66、CSS谷歌字体和Icon图标
下一篇：小白总结:前端HTML基础知识点(1)——元素总结

网站首页 > 技术文章正文

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

html

js

???????

???

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 技术文章 正文

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

html

js

???????

???

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 技术文章正文

取消回复欢迎你发表评论: