Canvas知识点总结

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.οnlοad=function(){
     var canvas=document.getElementById("canvas");
     canvas.width=1200;  //设置画布宽度
     canvas.height=500;  //设置画布高度
     var context=canvas.getContext("2d");
}
</script>

第二：在css中设置（不建议使用）

因为css指定的是canvas这块画布的显示的大小，但是对于一个canvas元素来说，除此之外，包括他内里的显示的图画的分辨率的大小。