慕课在线编辑器

代码提交代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
    <script>
		const canvas = document.getElementById('imooc');
		canvas.width=400;
		canvas.height=240;
		const ctx = canvas.getContext('2d');
		
		ctx.fillStyle="#456795";
		ctx.font="20px 微软雅黑";
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,20);
		ctx.lineTo(380,20);
		ctx.stroke();
		ctx.textBaseline="top"  //设置基线在文本顶部，文本和基线重合
		ctx.fillText("慕课Wiki textBaseline = top", 20,20)
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,60);
		ctx.lineTo(380,60);
		ctx.stroke();
		ctx.textBaseline="hanging" //设置文本悬挂在基线上，文本和基线没有重合
		ctx.fillText("慕课Wiki textBaseline = hanging", 20,60)
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,100);
		ctx.lineTo(380,100);
		ctx.stroke();
		ctx.textBaseline="middle" //设置基线在文本中间
		ctx.fillText("慕课Wiki textBaseline = middle", 20,100)
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,140);
		ctx.lineTo(380,140);
		ctx.stroke();
		ctx.textBaseline="alphabetic" //标准的字母基线
		ctx.fillText("慕课Wiki textBaseline = alphabetic", 20,140)
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,180);
		ctx.lineTo(380,180);
		ctx.stroke();
		ctx.textBaseline="ideographic" 
		ctx.fillText("慕课Wiki textBaseline = ideographic", 20,180)
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,220);
		ctx.lineTo(380,220);
		ctx.stroke();
		ctx.textBaseline="bottom" 
		ctx.fillText("慕课Wiki textBaseline = bottom", 20,220)
	
	</script>
<body>
</html>

运行结果