一、实现效果
二、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#myCanvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #000;
}
</style>
</head>
<body>
<div>
<canvas id="myCanvas" width="500" height="500"></canvas>
</div>
<script>
var canvas=document.getElementById('myCanvas');
canvas.style.backgroundColor="#000000";
var context=canvas.getContext('2d');
function drawRoundedRect(x,y,w,h,r,bgcolor){
context.beginPath();
context.moveTo(x+r,y);
context.fillStyle = bgcolor;
context.arcTo(x+w,y,x+w,y+h,r);
context.arcTo(x+w,y+h,x,y+h,r);
context.arcTo(x,y+h,x,y,r);
context.arcTo(x,y,x+w,y,r);
context.closePath();
context.fill();
}
drawRoundedRect(20,20,256,256,15,"#ffffff");
context.beginPath();
context.fillStyle="#22C6AB";
context.arc(148, 148, 100, 0, Math.PI * 2,true);
context.fill();
context.beginPath();
context.font = "60px Arial";
//设置字体填充颜色
context.fillStyle = "#ffffff";
context.fillText("尔嵘", 88, 163);
</script>
</body>
</html>