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

HTML5——canvas基础

2024-08-04 10:58:41   225人阅读

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基础


联系
我们