标签：canvas 浏览器 代码 转自 draw getContext 火狐 var
首先我想先说一下canvas的浏览器支持性，IE对它是不支持的，所以如果希望在IE下使用，请引入开源项目explorercanvas（下载网址http://code.google.com/p/explorercanvas/downloads/list）。在引入后请用一下代码进行嗅探： <head> <!--[id IE]><script src="excanvas.js"></script><![endif]--> </head>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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。