canvas元素简易教程（1）(大部分转自火狐，自己只写了简单的代码分析)
作者：互联网
canvas的使用与image元素颇为一致，都是在指定的位置开辟出一个承载的容器。它只有两个属性，width与height，这两个属性都是可选的，如果都没有赋值默认为宽300高150像素。
可以用id标示canvas元素，也可以为其如同一张普通的图片一样设定样式，但是这些样式对其产生的图像没有什么影响。如果不指定样式，其默认为透明。
在初始状态下canvas是空白的，所以我们需要用脚本进行绘图。在绘图之前，我们需要渲染上下文，它可以通过canvas元素对象的getContext方法来获取，与此同时我们还可以得到画图所需要用到的函数。getContext() 接受一个用于描述其类型的值作为参数，在目前似乎只支持2d一个属性，将来也许在3d绘图得到支持以后可以使用其它的参数，但目前先不要去尝试了。
例：
<canvas id="tutorial" ...></canvas>
<script type="text/javascript">
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
</script>
对于canvas元素，我们必须考虑浏览器的支持问题，对于较新的canvas元素，浏览器对它的支持并不完全，因此我们应该采取一些措施。最简单的方法就是在标签中写下失败的提示信息，则会在页面展示这些信息。此外，canvas在safari浏览器中不需要加尾标签，但是在FF中并不支持这样，我们应该统一加上这个尾标签。
浏览器的支持可以进行JS检测，代码如下：
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
在此贴下mozilla的教学代码模板，此后所有代码均采用mozilla的教学代码，并非笔者较懒，mozilla的教学代码确实要略好一点，望谅解。
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onl oad="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
通过上述的模板我们可以开始canvas的第一步学习了，在代码中我们看到了draw的函数，它被置于页面完全加载后执行。当然我们并不推荐这样书写代码，应该在文件头以JS的形式进行书写：
window.onload = draw();
这样的书写方式比较合乎规范，也达到了页面分离原则。因此我们将代码修改为：
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
window.onload = draw();
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
在此处提出window.onload与draw的次序问题，WEB前端代码是逐行执行的，对函数的前后顺序按理必须严格，但是大部分浏览器都会有这样的一个优化，也就是如果先读取window.onload = draw();一句时，会等待之后的draw函数的载入，当页面加载完成之前载入该函数则可以执行。不过我建议，必须按顺序书写，火狐浏览器对这种代码的优化是不支持的，而前端的JS要求是兼容所有的浏览器。所以，标准必须遵守。
好了，canvas绘画的道路正式开始了，让我们期待吧~
转载于:https://www.cnblogs.com/xiao-yao/archive/2012/02/08/2342112.html
标签：canvas,浏览器,代码,转自,draw,getContext,火狐,var 来源： https://blog.csdn.net/weixin_34146986/article/details/94442507