首页 > 代码库 > 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基础
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。