canvas初级

绘图操作
canvas本身不具备画图能力，一切都通过js
兼容：ie9+ chrome FF
oC = document.querySelector('canvas);
获取画笔： var gd=oC.getContext('2d');

起始点:    gd.moveTo(x,y) 
连接到哪:   gd.lineTo(x,y) 
描边: gd.stroke(); 
描边颜色:   gd.strokeStyle='rgba/rgb/#f00/red'; 
填充: gd.fill(); 
填充颜色:   gd.fillStyle(); 
闭合路径 (自动连接到起始点):        gd.closePath(); 
开始路径 (开始绘制一个新的图案，屏蔽之前 ):    gd.beginPath(); 
画图基本流程
    gd.beginPath();
    画图
    gd.closePath();
    gd.storke(); 
矩形 :    gd.strokeRect(x,y,w,h); 
矩形填充:gd.fillStyle 
圆:  gd.arc(cx,cy,r,起始角度,结束角度,是否逆时针); 
画文字:    gd.strokeText(文字,x,y);
水平居中:gd.textAlign='center/left/right';
垂直居中:gd.textBaseline='middle/top/bottom';
获取文字宽度:gd.measureText(str).width
    清除画布：gd.clearRect(0,0,oC.width,oC.height);

端点样子
    gd.lineCap='round';
        butt        默认值
        round       圆
        square      方
连接点的样子
    gd.lineJoin='bevel';
        bevel       斜切
        round       圆
        miter       默认值 
事件
     需要模拟 if(ev.clientX>x&&ev.clientXy&&ev.clientY

draw.png

   像素级操作
          var result=gd.getImageData(0,0,oC.width,oC.height);
           var d=result.data;
          gd.putImageData(result,0,0); 

简易的画图板:

        var oC = document.querySelector('canvas');
        var gd = oC.getContext('2d');
        oC.onmousedown = function(ev){ 
            gd.beginPath();
            gd.moveTo(ev.clientX,ev.clientY);
            oC.onmousemove = function(ev){
                gd.lineTo(ev.clientX,ev.clientY);
                gd.stroke();
            }
            oC.onmouseup = function(){
                oC.onmousemove = null;
                oC.onmouseup = null;
            }
            return false;
        }

简易柱状图：

function rnd(n,m){
    return Math.floor(Math.random()*(m-n)+n);   
}
window.onload=function (){
    var oC=document.querySelector('canvas'); 
    var gd=oC.getContext('2d'); 
    var arr=[300,200,50,80,150,900]; //模拟后台数据
    var iMax=Math.max.apply(null,arr); //找到数组中最大的
    //求出每个柱子的高度
    var aHeight=[]; 
    for(var i=0; i

简易饼状图：

         function rnd(n,m){
            return Math.floor(Math.random()*(m-n)+n);
        }
        function d2a(n){//度数转弧度
            return n*Math.PI/180;
        }
        window.onload = function(){
            var oC = document.querySelector('canvas');
            var gd = oC.getContext('2d');
            var arr = [3,5,7,8,4];//模拟后天数据
            var sum = 0;   //总数量
            for(var i = 0;i < arr.length;i++){
                sum += arr[i];
            }
            var aDeg = [];//每一项所占的度数
            for(var i = 0;i < arr.length;i++){
                aDeg[i] = arr[i]/sum*360;
            }
            //画圆
            function drawPie(start,end){
                gd.beginPath();
                gd.fillStyle='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
                gd.moveTo(200,200);
                gd.arc(200,200,100,d2a(start),d2a(end),false);
                gd.fill();
            }
            var d=0;
            for(var i = 0;i < aDeg.length;i++){
                console.log(d);
                drawPie(d,d+aDeg[i]);
                d += aDeg[i];
            }
        }

运动（开定时器，改变left top ）

     var oC=document.querySelector('canvas'); 
     var gd=oC.getContext('2d'); 
     var x=100;
     setInterval(function (){
            gd.clearRect(0,0,oC.width,oC.height);
            gd.strokeRect(x++,100,100,100);
   },30);

导出图片

平铺图片：

var oC=document.querySelector('canvas');
    var gd=oC.getContext('2d'); //画笔

    var oImg=new Image();

    var n=0;

    oImg.onload=function (){
        setInterval(function (){
        gd.clearRect(0,0,oC.width,oC.height);
            gd.drawImage(oImg,
                0,n*60,60,60,   //截取图片
                100,100,120,120//改变图片位置和大小
            );
            n++;
            if(n==10){
                n=0;
            }
        },30);
    };

    oImg.src='coinAni2.png';

图片阴影：

var oC=document.querySelector('canvas');
    
    var gd=oC.getContext('2d');
    
    gd.shadowOffsetX=10;
    gd.shadowOffsetY=10;
    gd.shadowColor='red';
    gd.shadowBlur=2;
    
    gd.font='100px a';
    gd.strokeText('前端开发',200,200);

径向渐变

function d2a(n){
    return n*Math.PI/180;
}
window.onload=function (){
    var oC=document.querySelector('canvas');
    
    var gd=oC.getContext('2d');
    
    var linear=gd.createRadialGradient(400,400,340,400,400,200); 
    linear.addColorStop(0,'#f00');
    linear.addColorStop(0.1,'orange');
    linear.addColorStop(0.3,'yellow');
    linear.addColorStop(0.5,'green');
    linear.addColorStop(0.8,'blue');
    linear.addColorStop(0.9,'purple');
    linear.addColorStop(1,'#fff'); 
    gd.fillStyle=linear;
    gd.lineWidth=100;
    gd.arc(400,400,340,d2a(-180),d2a(0),false);
    gd.fill();
};

像素级操作

function testPixel(){
 var canvas = document.getElementById('lesson01');
 var c = canvas.getContext('2d');

 var img = new Image();

img.onload = function() {
    //draw the image to the canvas
    c.drawImage(img,0,0);
    //get the canvas data
    var data = c.getImageData(0,0,canvas.width,canvas.height);
    //invert each pixel
    for(n=0; n