Canvas常用API有哪些，其兼容性如何解决？

艾光远

已于 2025-08-04 11:09:14 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Interview 文章标签：前端开发 HTML 面试

于 2021-11-08 11:06:29 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/121203816

Interview 专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了Canvas的几个常用API，如fillRect用于绘制实心矩形，strokeRect用于绘制空心矩形，fillText和strokeText分别用于填充和描边文本。针对低版本浏览器的兼容性问题，提出了两种解决方案：通过createElement创建HTML5标签和引入html5shiv.js。同时，强调了需要初始化新标签的CSS，并给出了在IE6/7/8禁用脚本情况下的处理策略，即引导用户到noscript页面，使用HTML4标签替代HTML5标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

了解本专栏