效果图
html结构
,,,,
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"在
& lt;元http-equiv=癤-UA-Compatible"内容=癐E=edge"在
& lt; title> canvas7
& 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;);
context.beginPath ();
context.moveTo (100350),
context.lineTo (500350),
context.lineTo (500200),
context.lineTo (700400),
context.lineTo (500600),
context.lineTo (500450),
context.lineTo (100450),
context.closePath ();
上下文。线宽=10;
上下文。fillStyle=皔ellow"
上下文。strokeStyle=? 058“
context.fill ();
context.stroke ();}
& lt;/script>