canvas · w112 · 看云

> ### canvas 绘图步骤 ~~~ 1.创建一个画布标签<canvas></canvas> 2.获取画布元素 var myCanvas = document.querySelector('canvas'); 3.获取上下文，绘制工具箱 var ctx = myCanvas.getContext('2d'); 4.确定画笔的起始点坐标分别为x，y ctx.moveTo(100,100); 5.绘制线条坐标 ctx.lineTo(200,100); 6.进行描边 ctx.stroke(); ~~~ > ##### 入门代码 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border: 1px solid #ccc; /*不建议在样式设置尺寸*/ /*width: 600px; height: 400px;*/ } </style> </head> <body>    <canvas width="600" height="400" ></canvas>   <script> /*1.获取元素*/ var myCanvas = document.querySelector('canvas'); /*2.获取上下文绘制工具箱 */ /*是否有3d 暂时没有*/ var ctx = myCanvas.getContext('2d'); /*web gl 绘制3d效果的网页技术*/ /*3.移动画笔*/ ctx.moveTo(100,100); /*4.绘制直线 (轨迹，绘制路径)*/ ctx.lineTo(200,100); /*5.描边*/ ctx.stroke(); </script> </body> </html> ~~~