代码
提交代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网Wiki</title> <style> #imooc{ border:1px solid #ccc; } </style> </head> <body> <canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas> <script> const canvas = document.getElementById('imooc'); const ctx = canvas.getContext('2d'); ctx.strokeStyle="#456795"; ctx.lineWidth=18; //绘制第一条折线 ctx.beginPath() ctx.moveTo(30,20); ctx.lineTo(100,75); ctx.lineTo(30,130); ctx.lineJoin="miter"; ctx.stroke(); //绘制第二条折线 ctx.beginPath() ctx.moveTo(80,20); ctx.lineTo(150,75); ctx.lineTo(80,130); ctx.lineJoin="bevel"; ctx.stroke(); //绘制第三条折线 ctx.beginPath() ctx.moveTo(130,20); ctx.lineTo(200,75); ctx.lineTo(130,130); ctx.lineJoin="round"; ctx.stroke(); </script> </body> </html>
运行结果