html5之Canvas绘图工具基础介绍

PS:

　　中文版教程参考：https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial

一、canvas标签

　　Canvas 对象表示一个 HTML 画布元素。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

　　<canvas> 标签定义图形，比如图表和其他图像；<canvas> 标签只是图形容器，必须使用脚本来绘制图形。

　　大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。(下方实例中的ctx即是)

二、canvas定义

<canvas id=“myCanvas”  width="150" height="150"></canvas>

三、canvas脚本绘制

　　a、使用canvas 元素来显示一个矩形

<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';             //   也可使用rgb填充：ctx.fillStyle = "rgb(200,0,0)";
　　ctx.fillRect(0,0,80,100); 
</script>

　　b、绘制三角形形状：

<script type="text/javascript">
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.moveTo(10,10);
    cxt.lineTo(150,50); 
    cxt.lineTo(10,50);
    cxt.lineTo(10,10); 
    cxt.stroke();
    cxt.closePath(); 
    cxt.fill();
</script>

结果图：

　　

 四、使用路径path坐标点集绘制canvas 

<script>
　　var linePaths =[[0,0],[100,130],[150,150],[200,300]];
　　var ctx=$('canvas')[0].getContext('2d');
　　function drawPath(){
        //画线
        ctx.beginPath();
        ctx.globalAlpha = "0.5";       //透明度
        for (var k = 0; k < linePaths.length; k++) {
            if (k == 0) {
                ctx.moveTo(linePaths[0][0],linePaths[0][1]);
            } else {
                ctx.lineTo(linePaths[k][0],linePaths[k][1]);
            }
        }
        ctx.lineWidth =4;                //线宽
        ctx.strokeStyle = "Green";  //颜色
        ctx.stroke();            
　　}; 
　　drawPath();
</script>

结果图：

　　　　　　　　　　　　

五、canvas画布清空（实质：重新绘制）   

　　canvas这个标签就像一个img图片，可以在上面绘制很多的geometry，比如点、线、面。但所有绘制的元素是一个整体，集成在canvas上。如果想判断某点是不是在canvas绘制的要素上，可以通过重绘来完成，没有办法直接判断。　　

　　值得注意的是，isPointInPath只能判断当前路径，不能一次性对canvas中所有图形路径进行查询判断，因而需要重绘。　　

　　重新绘制canvas中个各个geometry，绘制一个判断一次，因为图形的路径绑定在canvas标签上，通过 isPointInPath（）对当前路径（currentPath）判断有效。换句话说就是，当点击事件发生后，对canvas中的内容进行重绘，每次重绘一个路径图形，就用 isPointInPath（）判断一次，如果在路径内，再执行相应的操作，比如所有相同id的路径高亮显示等。

　　比如目的是判断鼠标当前点point(x,y)是不是在canvas绘制的要素上，用代码解释上方的描述：

　　

六、canvas画布的方法（截图、分析）

七、综述

　　a、canvas相对于svg的优势...

　　b、canvas对于适量绘制地图方法的可行（会在其他文章中详述使用方法）

PS： 先列出提纲，内容待续。。。