画布画一个空心圆，并且在周围写上相应的字体。

最新推荐文章于 2021-02-21 08:17:37 发布

置顶 qq_15577891

最新推荐文章于 2021-02-21 08:17:37 发布

阅读量491

点赞数 3

本文链接：https://blog.csdn.net/qq_15577891/article/details/87612612

版权

在这里插入图片描述

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.font = '10px "微软雅黑"';	
cxt.textAlign = "center";
cxt.strokeText("立冬11/21", 226, 10);


cxt.textAlign = "center";
cxt.strokeText("1", 226, 446);

cxt.textAlign = "center";
cxt.strokeText("2", 26, 100);

cxt.textAlign = "center";
cxt.strokeText("3", 26, 356);

cxt.textAlign = "center";
cxt.strokeText("4", 426, 100);

cxt.textAlign = "center";
cxt.strokeText("5", 426, 356);

cxt.lineWidth=16;
cxt.strokeStyle="green";
cxt.beginPath();
cxt.arc(226,226,200,0,Math.PI*2,false);
cxt.closePath();


cxt.stroke();
//封闭新路径
cxt.closePath();


</script>

</body>
</html>