1. canvas是内联可置换元素，设置display：block；margin：0 auto是画布可以居中显示。
<canvas id="canvas2" style="display: block;background-color: red; margin:0 auto;"> </canvas>
如图：
2. canvas的兼容性写法
canvas的兼容性写法有两种，一种是：直接在canvas标签里说明此浏览器不支持canvas元素；另一种是：用JavaScript来判断浏览器是否支持canvas元素。
第一种方法：在canvas标签里说明
<canvas id="canvas2" style="display: block;background-color: red; margin:0 auto;"> 您的浏览器不支持canvas元素，请升级您的浏览器 </canvas>
效果如图：
支持canvas元素的浏览器显示效果：
不支持canvas元素的浏览器的显示效果：
扫描二维码关注公众号，回复：
161076 查看本文章
第二种方法：用JavaScript中的if语句判断兼容性
<script>
var canvas=document.getElementById("canvas2");
if(canvas.getContext("2d")){
var context=canvas.getContext("2d");
//开始使用canvas绘制
}
else{
alert("您的浏览器不支持canvas元素");
}
</script>
3. canvas元素在标签内部设置宽高和在css样式中设置宽高的区别
第一：在标签内部设置宽高（符合w3c标准）
设置的宽高后边没有单位（width="1200" height="500"），这个大小决定了canvas元素内里的精度
<canvas id="canvas2" style="display: block;background-color: red; margin:0 auto;" width="1200" height="500"> 您的浏览器不支持canvas元素，请升级您的浏览器 </canvas>
标签内部设置宽高还可以这样写：
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=1200; //设置画布宽度
canvas.height=500; //设置画布高度
var context=canvas.getContext("2d");
}
</script>
第二：在css中设置（不建议使用）
因为css指定的是canvas这块画布的显示的大小，但是对于一个canvas元素来说，除此之外，包括他内里的显示的图画的分辨率的大小。