HTML5 canvas标签－1 基本使用

终于有空使用csdn和大家分享点自己平时学习工作时候的心德啦～

第一步 介绍下canvas的基本使用：

首先 因为canvas是html5的一个标签 所以保险起见 可以先确认下canvas是否兼容

try { 
    document.createElement("canvas").getContext("2d"); 
    console.log("canvas可以使用"); 
} catch (e) { 
    alert(e);
} 

很多基本函数 诸如moveTo(),stroke()我觉得大家可以在w3school.com上找到详细的资料。（http://blog.csdn.net/clh604/article/details/8536059 提供了大量的详细绘画教程）

因为做的主要是图像处理 所以我主要使用drawImage()还有getImageData()函数。

http://www.w3school.com.cn/jsref/met_canvasrenderingcontext2d_drawimage.asp 这里有drawImage的详细教程

http://www.w3school.com.cn/tags/canvas_getimagedata.asp 这里有getImageData的详细教程

下面我要说一下开发中碰到的坑。首先getImageData是会碰到跨域问题的。(http://www.csdn.net/article/2011-01-27/290968   -跨域的意思) 解决办法是 在header中加入(Allow-Control-Allow-Origin)。但是在安卓中，版本号在4.3以下的部分安卓手机并不支持这个协议 所以只能部署在同一个域名目录下

来个demo代码

<img id="demoPic" src="pic.jpg" style="width: 100%">
<script type="application/javascript">
    var pic = document.getElementById("demoPic"),
        canvas = document.getElementById("canvas"),
        ctx=canvas.getContext("2d"),
        imageData;
    window.onload = function(){
        var width =  pic.clientWidth,
        height = pic.clientHeight;
        canvas.setAttribute("width",pic.clientWidth);
        canvas.setAttribute("height",pic.clientHeight);
        ctx.drawImage(pic,0,0,canvas.width,canvas.height);
        pic.style.display = "none";
        canvas.style.display = "block";
        imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    }
</script>