帆布绘制箭头并填充

效果图

帆布绘制箭头并填充

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>

帆布绘制箭头并填充

帆布绘制箭头并填充