HTML 5 学习笔记之 canvas 标签

Canvas是HTML5中的画布API，用来帮助大家在浏览器上快速的绘制图形图像。

Canvas是什么？

HTML5 <canvas> 元素可以用来通过使用脚本来绘制图形图像。<canvas>元素只是一个图形的容器，你必须使用脚本来绘制图形。

一个canvas是一个可以绘制的HTML定义的区域，拥有高度和宽度等属性。

Canvas拥有几个绘制路径，矩形，圆形，字符和添加图片的方法。

浏览器支持

IE9，Firefox，Opera，Chrome和Safari 5都支持这个<canvas>元素。

注意：IE8和更早的版本不支持canvas这个元素。

 

对象方法的介绍： http://www.w3cschool.cn/dom_obj_canvasrenderingcontext2d.html

实例：

如何通过 canvas 元素来显示一个红色的矩形：

<canvas id="myCanvas" width="500" height="300"></canvas>

使用Javascript来绘制，所有的绘图都在javascript中完成。如下：

<script type="text/javascript">
    var c=document.getElementById("myCanvas");　　// 使用id来找到<canvas>对象
    var ctx=c.getContext("2d");　　　　　　　　　　　// 创建一个context对象
　　// getContext("2d")对象基于一个HTML5的内建对象，使用很多方法来绘制直线，矩形，圆形，字符和图片等等。
　　// fillStyle使得矩形颜色为暗黑色，fillRect用来指定矩形形状，位置和尺寸。
    ctx.fillStyle="#202020";　　　　　　　　　　　　　// 两行用来绘制一个黑色的矩形
    ctx.fillRect(0,0,150,75);　　　　　　　　　　　　// fillRect属性拥有参数(0,0,150,75)。意思是从左上端(0,0)坐标画出一个150x75的矩形
</script>

 

绘制直线：

<script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        // moveTo() 方法将当前位置设置为 (x, y) 并用它作为第一点创建一条新的子路径。如果之前有一条子路径并且它包含刚才的那一点，那么从路径中删除该子路径。
　　　　　ctx.moveTo(10,10);
        // lineTo() 方法为当前子路径添加一条直线。这条直线从当前点开始，到 (x, y) 结束。当方法返回时，当前点是 (x,y)。
　　　　　ctx.lineTo(150, 10);　　　　　　　　　
        ctx.lineTo(50,80);
        ctx.lineTo(250,80);
　　　　　// stroke() 方法绘制当前路径的边框。路径定义的几何线条产生了，但线条的可视化取决于 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等属性。
        ctx.stroke();
    </script>

绘制圆形：

<script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle="#202020";
　　　　　//beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。当一个画布的环境第一次创建，beginPath() 方法会被显式地调用。

        ctx.beginPath();
　　　　　// 这个方法的头 5 个参数指定了圆周的一个起始点和结束点。调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。接下来，它沿着圆周，在子路径的起始点和结束点之间添加弧。
        ctx.arc(170,180,80, 0,Math.PI*2,true);
　　　　　// 如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。如果子路径已经闭合了，这个方法不做任何事情。
        ctx.closePath();
　　　　　// fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径。这一路径的每一条子路径都单独填充。任何未闭合的子路径都被填充，就好像已经对他么调用了 closePath() 方法一样（但是，注意，实际上没有这么让子路径成为闭合的）。
        ctx.fill();
    </script>

绘制渐变效果：

<script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
　　　　　// createLinearGradient() 方法创建一条线性颜色渐变。createLinearGradient(xStart, yStart, xEnd, yEnd);
　　　　　var grd=ctx.createLinearGradient(0,0,275, 180); 
　　　　　// addColorStop() 提供了一种描述渐变中颜色变化的方法。该方法可以调用一次或多次来改变渐变的开始点和结束点之间的特定百分段的颜色。
　　　　　grd.addColorStop(0,"#000000"); 
　　　　　grd.addColorStop(1,"#909090"); 
　　　　　ctx.fillStyle=grd; 
　　　　　ctx.fillRect(0,0,450, 250); 
</script>

绘制图片：

<script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        var img=new Image();
        img.onload = function(){
　　　　  // rawImage() 方法有 3 个变形。第一个变形把整个图像复制到画布，将其放置到指定点的左上角，并且将每个图像像素映射成画布坐标系统的一个单元。第二个变形也把整个图像复制到画布，但是允许您用画布单位来指定想要的图像的宽度和高度。第三个变形则是完全通用的，它允许您指定图像的任何矩形区域并复制它，对画布中的任何位置都可进行任何的缩放。
        ctx.drawImage(img, 105, 105);
        };
        img.src="assets/gbin1.jpg";
    </script>