回到首页
个人中心
反馈问题
注册登录
下载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.moveTo(10,10); ctx.lineTo(100,50); ctx.lineTo(200,10); ctx.strokeStyle="red"; ctx.lineWidth=4; //设置线段宽度为4px ctx.stroke(); //绘制第二条线段 ctx.moveTo(10,30); ctx.lineTo(100,70); ctx.lineTo(200,30); ctx.strokeStyle="green" ctx.lineWidth=5; //设置线段宽度为5px ctx.stroke(); //绘制第三条线段 ctx.moveTo(10,50); ctx.lineTo(100,100); ctx.lineTo(200,50); ctx.strokeStyle="blue" ctx.lineWidth=6; //设置线段宽度为6px ctx.stroke(); </script> </body> </html>
运行结果