您的位置:知识库 » Web前端

HTML5之Canvas标签简要学习

作者: 独钓寒江  来源: 博客园  发布时间: 2010-10-18 21:16  阅读: 1774 次  推荐: 1   原文链接   [收藏]  
摘要:HTML5 提供了画布(canvas)标签,通过与Javascript结合使用,可以在网页上绘制图像。Canvas是一个矩形区域,使用Javascript可以控制其每一个像素。本文将对canvas标签进行简要的学习。

    HTML5 提供了画布(canvas)标签,通过与Javascript结合使用,可以在网页上绘制图像。Canvas是一个矩形区域,使用Javascript可以控制其每一个像素。本文将对canvas标签进行简要的学习。

  1、canvas标签说明

    canvas标签是一个矩形区域,它包含两个属性width和height,分别表示矩形区域的宽和高,这两个属性都是可选的,并且都可以通过css来设定,他们的默认值是300px和150px。canvas在网页中的形式如下:

<canvas id="myCanvas" width=”300” height=”200” style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

 解析:

    为canvas设置id属性是便于Javascript调用;

    第二行是当浏览器不支持canvas标签时,将显示这行文字。

  2、检测浏览器支持

  Canvas标签并没有得到目前所有浏览器的支持,因此在使用canvas绘图的时候,要先检测客户端浏览器是否支持。下面的示例将通过Javascript判断浏览器是否支持:

<canvas id="myCanvas" width=”300” height=”200” style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
    var myCanvas = document.getElementById("myCanvas");
    if (!myCanvas.getContext)
    {
        alert("Your browser does not support the canvas element.");
    }
    else
    {
        // do something here
    }
</script>

解析:

  上面的Javascript代码通过判断getContext方法是否为空来判断浏览器是否支持canvas标签。

  3、绘制线条和图案

    在没有canvas之前,想要在网页上面绘制线条或图案,是非常麻烦且不兼容的。我曾在《js画直线》一文中转载了网络上常用的在IE和FF中绘制线条的方法,但如果想要这些方法通用,则是不可能的。但现在有了canvas标签,一切就变得简单了。

    现在,你只需要在页面上添加canvas标签,并通过Javascript调用它的相应方法,就可以轻松的在页面上绘制线条和图案。

//绘制线条
<canvas id="myCanvas" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var myCanvas = document.getElementById("myCanvas"); if (!myCanvas.getContext) { alert("Your browser does not support the canvas element."); } else { var myContext = myCanvas.getContext("2d"); myContext.moveTo(200, 150); myContext.lineTo(100, 100); myContext.lineTo(200, 50); myContext.strokeStyle = "#FF0000"; myContext.lineWidth = 4; myContext.stroke(); } </script>

解析:

  显示在页面中放置了一个canvas标签,设定id、width、height等属性,并为这个标签设定边框。
  在Javascript中检测浏览器是否支持
  当浏览器支持的时候开始调用getContext方法获得绘图的上下文(这地方很像vc中的GDI绘图~~),目前只提供了2D上下文,将来还有可能支持OpenGL ES的3D上下文。
  moveTo方法是将当前位置移动到指定的坐标
  lineTo方法是向指定的左边绘制直线
  strokeStyle 属性是指定线条的颜色,在本例子中指定为红色
  lineWidth 属性设置线条的粗细,这里设置为4px
  stroke方法则是将直线显示出来。貌似是之前只是规定了哪里有线条,并没有显示,当调用这个方法后,线条才可以显示。

//绘制图案
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var myCanvas = document.getElementById("myCanvas"); if (!myCanvas.getContext) { alert("Your browser does not support the canvas element."); } else { var myContext = myCanvas.getContext("2d"); myContext.fillStyle = "rgb(200,0,0)"; myContext.fillRect(10, 10, 55, 50); myContext.fillStyle = "rgba(0, 0, 200, 0.5)"; myContext.fillRect(30, 30, 55, 50); myContext.fillRect(100, 0, 150, 50); myContext.strokeRect(100, 60, 150, 50); myContext.clearRect(130, 10, 90, 30); } </script>

解析:

  直接到fillStyle属性,之前的代码是相同的,不再赘言。
  fillStyle属性设定了填充的颜色、透明度等,如果设置为"rgb(200,0,0)",则表示一个颜色,不透明;如果设置  为"rgba(0,0,200,0.5)",则表示颜色为rgb(0,0,200),透明度为50%,
  fillRect方法是绘制一个矩形,这个矩形区域没有边框,只有填充色。这个方法有四个参数,前两个表示左上角的坐标位 置,第三个参数为长度,第四个参数为高度。
  strokeRect方法绘制一个带边框的矩形。该方法的四个参数的解释同上。
  clearRect方法是清除一个矩形区域,被清除的区域将没有任何线条。该方法的四个参数的解释同上。

 

  4、绘制路径

    路径是绘制自定义图形的好方法,在canvas中通过beginPath()方法开始绘制路径,这个时侯你就可以绘制直线、曲线等,绘制完成后调用fill()和stroke()完成填充和设置边框,通过closePath()方法结束路径的绘制。下面的例子讲演时如何绘制路径:

<canvas id="myCanvas" width="300" height="200"  style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
    var myCanvas = document.getElementById("myCanvas");
    if (!myCanvas.getContext)
    {
        alert("Your browser does not support the canvas element.");
    }
    else
    {
        var myContext = myCanvas.getContext("2d");
        
        myContext.fillStyle = '#0000ff';
        myContext.strokeStyle = '#ff0000';
        myContext.lineWidth = 2;
        
        myContext.beginPath();
        
        myContext.moveTo(30, 30);
        myContext.lineTo(150, 30);
        myContext.lineTo(150, 120);
        myContext.lineTo(90, 100);
        myContext.lineTo(120, 60);
        myContext.lineTo(30, 30);
        
        myContext.fill();
        myContext.stroke();
        
        myContext.closePath();
    }

解析:

  在获得渲染上下文后,设置了填充色、边框色和边框宽度。
  调用beginPath()方法开始绘制路径
  通过lineTo()方法绘制一个闭合的自定义图形
  调用fill()方法进行填充
  调用stroke()方法设置边框
  调用closePath()方法结束路径的绘制

1
0
标签:HTML5 Canvas

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻