首页手记 canvas初级

canvas初级

标签：

Html/CSS

绘图操作
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.clientX<x+w&&ev.clientY>y&&ev.clientY<y+h){}
    阴影：
        gd.shadowOffsetX=10;        x
        gd.shadowOffsetY=10;        y
        gd.shadowColor='red';       color
        gd.shadowBlur=2;            模糊度
    渐变
        gd.createLinearGradient(x1,y1,x2,y2); 
        linear.addColorStop(位置,颜色); 
  径向渐变
    gd.createRadialGradient(x1,y1,r1,x2,y2,r2);

平铺背景
        gd.createPattern(oImg,'no-repeat');
        gd.drawImage(oImg,200,100);
导出图片
        oC.toDataURL('image/gif');
画图片
    完美用法  ：
    gd.drawImage(img,
        sx,sy,swidth,sheight,
        x,y,width,height
  );

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.=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<arr.length; i++){
        aHeight[i]=arr[i]/iMax*oC.height;
    } 
    //画柱子
    var w=50; 
    for(var i=0; i<aHeight.length; i++){
        gd.beginPath();
        gd.fillStyle='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
        gd.fillRect(i*w*2,oC.height-aHeight[i],w,aHeight[i]);
    }
};

简易饼状图：

         function rnd(n,m){            return Math.floor(Math.random()*(m-n)+n);
        }        function d2a(n){//度数转弧度
            return n*Math.PI/180;
        }        window. = 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);

导出图片

<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title></title><style>body{ background:#000; }canvas{ background:#fff; }</style><script>function d2a(n){    return n*Math.PI/180;
}window.=function(){    var oC=document.querySelector('canvas');    var gd=oC.getContext('2d'); //画笔
    var linear=gd.createLinearGradient(-300,-300,300,200);

    linear.addColorStop(0,'red');
    linear.addColorStop(1,'yellow');

    gd.strokeStyle=linear;    var d=0;
    setInterval(function(){
        gd.save();
        gd.translate(200,150);
        gd.rotate(d2a(d++));
        gd.strokeRect(-100,-50,200,100);
        gd.restore();
    },16);    //导出图片
    var oBtn=document.getElementById('btn1');
    oBtn.=function(){        var res=oC.toDataURL('image/gif');        var oImg=new Image();
        oImg.src=res;        document.body.appendChild(oImg);

    };
};</script></head><body>
    <input type="button" value="按钮" id="btn1" />
    <canvas width="400" height="300"></canvas></body></html>

平铺图片：

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

    var oImg=new Image();    var n=0;

    oImg.=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.=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. = 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<data.width*data.height; n++) {        var index = n*4;
        data.data[index]   = 255-data.data[index];
        data.data[index+1] = 255-data.data[index];
        data.data[index+2] = 255-data.data[index];        //don't touch the alpha
    }    //set the data back
    c.putImageData(data,0,0);
}
 img.src = "Penguins.png";
}

作者：杨小楊
链接：https://www.jianshu.com/p/63c9cabc2c8b

点击查看更多内容