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

问题描述

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

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’;}

问题解答

//绘制实心矩形: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)

反了，设定颜色之后再画