HTML5——canvas基础

浏览数：28 / 时间：2015年06月09日

HTML部分：

1 <canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #000;">很抱歉，您的浏览器不支持canvas元素，请更换标准浏览器！</canvas>

JS部分：

window.onload = function(){
    //通过id来获取canvas元素，并将它保存在变量c中
    var c = document.getElementById(‘myCanvas‘);
    
　　//通过canvas的getContext方法来获取上下文，即创建canvas对象，以获取允许绘制的2d环境
    var context = c.getContext(‘2d‘);
    
　　//指定绘制矩形的填充色为#f0f(粉色)
    context.fillStyle = ‘#f0f‘;
    
　　//指定绘制矩形的位置坐标（50,25）和尺寸（宽100px，高50px）
    context.fillRect(50,25,100,50);    
};

浏览器支持情况：

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <canvas> 元素

注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 元素.不支持canvas元素的浏览器会忽略canvas元素而直接显示替代的文本内容

检测浏览器支持情况：

除了上述方法在不支持canvas的浏览器中显示替代文本之外，还可以用javascript脚本来检测浏览器是否支持canvas，方法是判断getContext函数是否存在

1 var c = document.getElementById(‘myCanvas‘);
2     if(c.getContext(‘2d‘)){
3         document.write(‘您的浏览器支持canvas！‘);        
4     }else{
5         document.write(‘您的浏览器不支持canvas！‘);
6 }