绘制圆弧
<canvas id="canvas" width="300" height="300" ref="canvas"></canvas>
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(150,150,50,0,Math.PI*1/2); ctx.stroke();
运行结果：
绘制直线
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(100,100); ctx.lineTo(200,150); ctx.stroke();
运行结果：
绘制圆角矩形
通过圆弧与直线相结合，绘制出矩形路径。
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var width = 100; var height = 50; var radius = 5; ctx.translate(100, 100); ctx.beginPath(0); ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2); ctx.lineTo(radius, height); ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); ctx.lineTo(0, radius); ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2); ctx.lineTo(width - radius, 0); ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2); ctx.lineTo(width, height - radius); ctx.closePath(); // 填充背景色 ctx.fillStyle = "#ff6a61"; ctx.fill(); ctx.restore();
运行结果：
填充文本
... ctx.font = '16px PingFangSC-Regular'; ctx.textAlign = "center"; ctx.textBaseline = 'middle'; ctx.fillStyle = '#fff'; ctx.fillText('快狗打车', 50, 25);
textBaseline 属性设置或返回在绘制文本时的当前文本基线。
运行结果：
宽度自适应
标签宽度设置定值的做法难免有些耍流氓，怎样才能实现标签宽度由文本内容撑起？
canvas为我们提供了ctx.measureText(text).width接口获得文本内容宽度；标签宽度 = 文本内容宽度 + 左右内边距。
先把绘制圆角矩形背景的部分单独抽出来：
function drawRoundRect(ctx, x, y, width, height, radius, bgc) { ctx.save(); ctx.translate(x, y); drawRoundRectPath(ctx, width, height, radius); ctx.fillStyle = bgc; ctx.fill(); ctx.restore(); } function drawRoundRectPath(ctx, width, height, radius) { ctx.beginPath(0); ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2); ctx.lineTo(radius, height); ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); ctx.lineTo(0, radius); ctx.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2); ctx.lineTo(width - radius, 0); ctx.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2); ctx.lineTo(width, height - radius); ctx.closePath(); } };
