html矩形框填充颜色的代码,js canvas绘制填充填充矩形添加边框颜色

效果图：

源码：html>

canvas绘制填充矩形

//绘制无填充矩形

var my1 = document.getElementById("mycanvas");//访问mycanvas

var ctx = my1.getContext("2d");//这个参数不需要改动

ctx.beginPath();//创建路径

ctx.lineWidth = 5;//边框大写，也就是描边

ctx.strokeStyle = "blue";//边框颜色

ctx.rect(20,20,50,50);//透明无填充；x，y，width,height

ctx.stroke();//相当于完成提交

//绘制填充矩形

var my1 = document.getElementById("mycanvas");//访问mycanvas

var ctx = my1.getContext("2d");//这个参数不需要改动

ctx.fillStyle = "red";    //填充颜色

ctx.fillRect(100,20,50,50);//透明无填充；x，y，width,height

ctx.stroke();//相当于完成提交

后续会慢慢发canvas的使用方法