首页 > 代码库 > HTML5——canvas基础

HTML5——canvas基础

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 }

当然也可以用alert弹窗来显示提示信息。

 

HTML5——canvas基础