1. canvas简介
canvas是HTML5提供的一个用于绘制图形的标签。与之前的标签不一样，canvas标签只是一个容器，在JS代码中通过getContext()方法获取具体的上下文（Context），然后可以在上下文中进行绘制。Canvas在动态效果、游戏、数据可视化等方面都有广泛的应用。
在canvas中，涉及到常用的几个API，如下所示:
// 获取canvas元素
var canvas = document.getElementById('canvas');
// 获取上下文，通常使用2d，表示二维绘图
var context = canvas.getContext('2d');
// 绘制矩形，fillRect方法表示填充颜色，strokeRect方法表示描边
context.fillRect(x, y, width, height);
context.strokeRect(x, y, width, height);
// 绘制文本，fillText方法表示绘制文字内容，strokeText方法表示描边文字
context.fillText(text, x, y);
context.strokeText(text, x, y);
// 绘制路径
context.beginPath();
context.moveTo(x, y);
context.lineTo(x, y);
context.closePath();
context.stroke();
2. 浏览器支持情况
canvas标签是HTML5的新特性，因此遗留浏览器可能不支持该标签。根据相关资料，以下是各大浏览器对Canvas的支持情况：
2.1 Chrome浏览器
Chrome浏览器是目前最受欢迎的浏览器之一，其对Canvas的支持非常好。从Chrome 4开始，就完全支持了HTML5 Canvas。可以通过以下代码检测是否支持Canvas：
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
如果浏览器支持Canvas，则会返回true。
2.2 Firefox浏览器
Firefox浏览器也对Canvas有很好的支持。从Firefox 2开始，其就支持HTML 5 Canvas标签。而且Firefox浏览器还具备canvas对SVG图形的支持，可以让开发人员在保证性能的情况下绘制更加复杂的图形。可以通过以下代码检测是否支持Canvas：
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
如果浏览器支持Canvas，则会返回true。
2.3 Safari浏览器
Safari是苹果公司推出的浏览器，其对Canvas也有良好的支持。从Safari 4开始，完全支持HTML5 Canvas标签。可以通过以下代码检测是否支持Canvas：
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
如果浏览器支持Canvas，则会返回true。
2.4 IE浏览器
IE浏览器一直被诟病对HTML5支持的不良，但随着IE 9的推出，IE浏览器对Canvas的支持情况得到了大幅度提升。通过使用ExplorerCanvas库，IE浏览器中也可以支持Canvas，但是在性能上无法和前面三种浏览器相媲美。可以通过以下代码检测是否支持Canvas：
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
如果浏览器支持Canvas，则会返回true。
2.5 Opera浏览器
Opera浏览器是一款不太流行但功能强大的浏览器。从Opera 9.5开始，其就支持HTML5 Canvas标签，且对SVG图形的支持也非常好。可以通过以下代码检测是否支持Canvas：
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
如果浏览器支持Canvas，则会返回true。
2.6 其他浏览器
除了以上五种浏览器外，针对不支持Canvas的浏览器，可使用Flash等技术来实现替代方案。一般情况下，用户浏览器支持HTML5，则应使用原生HTML5 Canvas标签满足需要。
3. 必备技能
3.1 JavaScript
对于开发HTML5 Canvas而言，熟悉JavaScript是必备的技能。JavaScript是一种高级、直译式的脚本语言，因为其能够加入HTML文档支持事件驱动，因此非常适合应用于在网页上呈现动态和交互性。
需要了解一些JavaScript基础，如语法、函数、变量、数组、循环、条件语句、事件等。
3.2 HTML5
理解HTML5对于Canvas开发也很重要。HTML5是最新的HTML标准，包含了许多新特性，其中就包括Canvas。HTML5对性能的优化也很多，能够更好地满足开发者的需求。
具体的HTML5相关知识，需要掌握各个标签的含义，如video、audio、placeholder、多媒体元素等等。
3.3 CSS3
开发HTML5 Canvas还需要熟悉CSS3。CSS3是是CSS的最新标准，其中包含了非常多的新特性，非常适合于开发web应用。在开发Canvas应用时，熟练使用CSS3中的动画效果、转换、渐变、阴影等属性能够让应用更加丰富和生动。
具体CSS3相关知识，在基础上要掌握CSS3中的新属性，如变形、过渡、动画、2D/3D转换等。
4. 结语
Canvas作为HTML5新增的标签，并且集成了浏览器绘图引擎，具有广泛的应用场景。本文对Canvas的兼容性进行了介绍，总结了现代浏览器的兼容性情况，还列举了必备的技能，如JavaScript、HTML5和CSS3，使读者能够更好地应用Canvas技术。