Canvas入门

使用Canvas

在浏览器中使用canvas，只用引入<canvas>标签即可！

注意：

  1. 在canvas标签中写入文字，如果浏览器支持就不会显示文字，不支持的话，就会显示文字
  2. 指定画布大小：直接在标签中指定width和height即可
  3. 对于canvas来说，不能直接使用margin: 0 auto;进行居中。如果需要居中，可以给他添加一个父元素，让父元素居中。
<!DOCTYPE html> <html lang=en> <head>   <meta charset=UTF-8>   <meta http-equiv=X-UA-Compatible content=IE=edge>   <meta name=viewport content=width=device-width, initial-scale=1.0>   <title>Document</title> </head> <body>   <!-- canvas在低版本中不兼容，需要给用户提示信息 -->   <canvas width=500px height=600px>     您的浏览器版本过低，请升级浏览器或使用Chrome浏览器   </canvas> </body> </html>

在canvas中画直线

步骤如下：

  1. 获取画布
  2. 获取画布的上下文
  3. 开始一条路径
  4. 确定起始点
  5. 确定结束点
  6. 着色
  7. 结束路径
<!DOCTYPE html> <html lang=en> <head>   <meta charset=UTF-8>   <meta http-equiv=X-UA-Compatible content=IE=edge>   <meta name=viewport content=width=device-width, initial-scale=1.0>   <title>Document</title>   <style>     canvas {       border: 2px solid black;       display: block;     }   </style> </head> <body>   <!-- canvas在低版本中不兼容，需要给用户提示信息 -->   <canvas id=canvas width=800px height=600px>     您的浏览器版本过低，请升级浏览器或使用Chrome浏览器   </canvas>    <script>     // canvas只能使用原生js     // 1. 获取画布     var canvas = document.querySelector(#canvas)     // 2. 获取画布的上下文     var ctx = canvas.getContext('2d')     // 3. 开始一条路径     ctx.beginPath()     // 4. 确定起始点     ctx.moveTo(100, 100)     // 5. 确定结束点     ctx.lineTo(400, 400)     // 6. 着色     ctx.stroke()     // 7. 结束路径     ctx.closePath()   </script> </body> </html>

getContext('2d')对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。这里只有“2d”属性，没有“3d”。

此外，还可以设置直线的颜色与宽度
设置颜色一定要在着色之前

// 设置颜色 // 在着色之前设置 ctx.strokeStyle = '#ff0000' // 设置线宽 ctx.lineWidth = 5