其他分享
首页 > 其他分享> > canvas元素简易教程(1)(大部分转自火狐,自己只写了简单的代码分析)

canvas元素简易教程(1)(大部分转自火狐,自己只写了简单的代码分析)

作者:互联网

首先我想先说一下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