案例1：绘制直线 · canvas基本功能

# 案例1：绘制直线先看图： ![](https://img.kancloud.cn/5e/c5/5ec59c68ddf39751cfb3d7488d412edf_283x148.png) 相关代码如下：‘ ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border: 1px solid #c3c3c3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c = document.getElementById("myCanvas"); //step1:获取canvas元素 var ctx = c.getContext("2d"); //step2:内建的HTML5对象 ctx.moveTo(0, 0); //step3-1:开始坐标 ctx.lineTo(200, 100); //step3-2：结束坐标 ctx.stroke(); //step3-3:绘制线条 </script> </body> </html> ```