html5 - Canvas的字体颜色和矩形颜色设置,后者不能覆盖前者求前辈解决,菜鸟

Question

// 画布案例:绘制图形 画布属性:

var canvas = document.querySelector('#canvas'); //第一步获取画布canvas属性
var but = document.querySelector('#but'); //第一步获取画布canvas属性
// console.log(but)
var context = canvas.getContext('2d');  //第二步获取画
but.onclick = function () {
    //实心字体,点击绘制会叠加
    var text = '我就尝试下';
    //字体大小必须和字体类型一起设置
    context.font = '30px 宋体';
    //字体颜色
    context.fillStyle = 'red';
    //绘制区域,(text,x,y,maxWdidth绘制文本最大宽度)
    context.fillText(text,100,50,100);

    //空心字体
    var text = '我再尝试下';
    //字体大小,类型
    context.font = '30px 宋体';
    //字体颜色
    context.strokeStyle = 'green';
    //绘制区域,设置空心字体
    context.lineWidth = 1;  //设置线条宽度,默认为1px
    context.strokeText(text,100,100);  //(text,x,y);

    //绘制实心矩形:
    context.fillRect(100,125,50,50); //(x,y,w,h)
    context.fillStyle = 'blue';
    //绘制空心矩形
    context.strokeRect(100,180,50,50) //(x,y,w,h)
    context.strokeStyle = 'yellow';
}

Answer 1

//绘制实心矩形:
context.fillStyle = 'blue';
context.fillRect(100,125,50,50); //(x,y,w,h)

//绘制空心矩形
context.strokeStyle = 'yellow';
context.strokeRect(100,180,50,50) //(x,y,w,h)

反了，设定颜色之后再画