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元素的浏览器的显示效果:
第二种方法:用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元素来说,除此之外,包括他内里的显示的图画的分辨率的大小。