回到首页
个人中心
反馈问题
注册登录
下载APP
代码
提交代码
<!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'); function drawBtn(str, x, y ){ var w = ctx.measureText(str).width; // 获取绘制文本的宽度 var h = parseInt(ctx.font) ctx.fillStyle="#456795"; ctx.fillRect(x-10,y-10,w+20,h+20) ctx.fillStyle="#fff"; ctx.textBaseline="hanging" ctx.fillText(str,x,y) } ctx.font="16px 微软雅黑"; drawBtn("慕课Wiki",40,40) ctx.font="18px 微软雅黑"; drawBtn("Imooc教程 Hello World", 40, 90) ctx.font="20px 微软雅黑"; drawBtn("确认", 40, 140) </script> <body> </html>
运行结果