html5 - Canvas的字体颜色和矩形颜色设置,后者不能覆盖前者求前辈解决,菜鸟
本文介绍了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)
反了,设定颜色之后再画
这篇关于html5 - Canvas的字体颜色和矩形颜色设置,后者不能覆盖前者求前辈解决,菜鸟的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文