回到首页
个人中心
反馈问题
注册登录
下载APP
代码
提交代码
<!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.lineWidth = 20; ctx.strokeStyle = "#456795" ctx.beginPath(); ctx.moveTo(30,30); ctx.lineTo(200,30); ctx.lineCap = "butt"; // 设置了lineCap属性值为 butt ctx.stroke(); ctx.beginPath(); ctx.moveTo(30,80); ctx.lineTo(200,80); ctx.lineCap = "round"; // 设置了lineCap属性值为 round ctx.stroke(); ctx.beginPath(); ctx.moveTo(30,130); ctx.lineTo(200,130); ctx.lineCap = "square"; // 设置了lineCap属性值为 square ctx.stroke(); //下面画两个基准线方便观察 ctx.lineWidth = 1; ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(30,0); ctx.lineTo(30,180); ctx.moveTo(200,0); ctx.lineTo(200,180); ctx.stroke(); </script> </body>
运行结果