帆布绘制正文形并填充3

效果图

html结构

& lt; !DOCTYPE html>

& lt; html>

& lt; head>

& lt;元charset=皍tf-8"在

& lt;元http-equiv=癤-UA-Compatible"内容=癐E=edge"在

& lt; title> canvas10

& lt;链接rel=皊tylesheet"https://www.yisu.com/zixun/href=" ">

& lt;/head>

& lt; body>

& lt;帆布id=癱anvas"风格=氨呔?1 px固体# aaa;还:块;保证金:50 px汽车;“在

当前浏览器不支持画布,请更换浏览器后再试

& lt;/canvas>

& lt;/body>

& lt;/html>

js脚本

& lt; script>

窗口。onload=function () {

画布var=. getelementbyid(& # 39;帆布# 39;);

画布。宽度=800;

画布。身高=800;

=canvas.getContext var上下文(& # 39;2 d # 39;);

绘制矩形(10背景下,100100400400年,“# 058“,“red");

}

函数绘制矩形(上下文,x, y,宽度,高度,borderWidth, borderColor, fillColor) {

上下文。线宽=borderWidth;

上下文。fillStyle=fillColor;

上下文。strokeStyle=borderColor;

context.fillRect (x, y,宽度、高度);

context.strokeRect (x, y,宽度、高度);

}

& lt;/script>

帆布绘制正文形并填充3