在浏览器中使用canvas,只用引入<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>
步骤如下:
<!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