前端面试 HTML— Canvas常用API有哪些，其兼容性如何解决？

Posted 2021-12-09 aiguangyuan

Canvas使用前需要获得上下文环境，暂不支持 3D。

常用API：

1. fillRect(x,y,width,height)  实心矩形；

2. strokeRect(x,y,width,height)  空心矩形；

3. fillText( "Hello world" , 200 , 200 )  实心文字；

4. strokeText( "Hello world" , 200 , 300 ) 空心文字；

新标签兼容低版本：

1. IE 9 之前版本通过 createElement 创建 html5 新标签；

<!--[if lt IE9]>
<script>
  (function() {
    if (!0) return;
    var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
    var i= e.length;
    while (i--){
      document.createElement(e[i])
    }
  })()
</script>
<![endif]-->

2. 引入 html5shiv.js；

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

 不管使用以上哪种方法，都要初始化新标签的CSS。因为HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局。

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

如果IE 6/7/8 禁用脚本的用户，那么就变成了无样式的"白板"网页，我们可以参照facebook的做法，引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 html4 标签替换 html5 标签，这要比为了保持兼容性而写大量 hack 的做法更轻便一些。

<!--[if lte IE 8]>
<noscript>
  <style>.html5-wrappers{display:none!important;}</style>
  <div class="ie-noscript-warning">
    您的浏览器禁用了脚本，请
    <a href="">查看这里</a>
    来启用脚本!或者
    <a href="/?noscript=1">继续访问</a>.
  </div>
</noscript>
<![endif]-->