canvas畫布水平居中
阿新 • • 發佈：2018-11-05
canvas 畫布水平居中
方式一：利用display 屬性，在style 樣式中設定display的值為block，然後設定margin:0 auto;即可實現水平局中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> canvas{ display: block; margin: 0 auto; border:1px solid red; } </style> </head> <body> <canvas id="canvas" width="400px" height="400px"></canvas> </body> </html>
效果如下圖所示：
方式二：在canvas外面包裹一個盒子div ，在style樣式設定盒子的寬度與canvas的寬度相等，盒子margin：0 auto；水平居中，既可以實現canvas畫布的水平居中，程式碼如下，效果圖略。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ margin:0 auto; width:400px; } canvas{ /*display: block; margin: 0 auto;*/ border:1px solid red; } </style> </head> <body> <div> <canvas id="canvas" width="400px" height="400px"></canvas> </div> </body>