文章詳情頁(yè)

html5 - Canvas的字體顏色和矩形顏色設(shè)置,后者不能覆蓋前者求前輩解決,菜鳥

瀏覽：182日期：2023-01-11 09:30:30

問(wèn)題描述

// 畫布案例:繪制圖形畫布屬性:

var canvas = document.querySelector(’#canvas’); //第一步獲取畫布canvas屬性var but = document.querySelector(’#but’); //第一步獲取畫布canvas屬性// console.log(but)var context = canvas.getContext(’2d’); //第二步獲取畫but.onclick = function () { //實(shí)心字體,點(diǎn)擊繪制會(huì)疊加 var text = ’我就嘗試下’; //字體大小必須和字體類型一起設(shè)置 context.font = ’30px 宋體’; //字體顏色 context.fillStyle = ’red’; //繪制區(qū)域,(text,x,y,maxWdidth繪制文本最大寬度) context.fillText(text,100,50,100); //空心字體 var text = ’我再嘗試下’; //字體大小,類型 context.font = ’30px 宋體’; //字體顏色 context.strokeStyle = ’green’; //繪制區(qū)域,設(shè)置空心字體 context.lineWidth = 1; //設(shè)置線條寬度,默認(rèn)為1px context.strokeText(text,100,100); //(text,x,y); //繪制實(shí)心矩形: 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’;}

問(wèn)題解答

回答1：

//繪制實(shí)心矩形: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)

反了，設(shè)定顏色之后再畫