Web 前端开发 让前端飞

Canvas基础3

2017-01-24  本文已影响0人  Brighten_Sun

canvas样式
阴影

        gd.shadowOffsetX='20';      //阴影x轴
        gd.shadowOffsetY='20';      //阴影y轴
        gd.shadowColor='blue';      //阴影颜色
        gd.shadowBlur='10';        //阴影大小

线性渐变

    var linear= gd.createLinearGradient(x0,y0,x1,y1);       //设置一个线性渐变
        linear.addColorStop(0,'red');                       //渐变颜色1
        linear.addColorStop(1,'green');                 //渐变颜色2
        gd.strokeStyle=linear;

渐变镜像

    var ra= gd.createRadialGradient(200, 150, 50, 200, 150, 80)   
                                        //1-4 2-5 的值要相同
        ra.addColorStop(0,'red');
        ra.addColorStop(1,'green')
        gd.strokeStyle=ra;

canvas背景

    要用onload事件
    var pa=gd.createPattern(oImg,'no-repeat');      //插入图片
                   插入那个图片  是否重复
        gd.fillStyle=pa;

导出图片内容

    var res=oC.toDataURL('image/jpeg png');                 //导出图片,默认png格式
        oImg.src=res;

像素级操作

    var result=gd.getImageData(0, 0, oC.width, oC.height);      //拷贝画布指定矩形像素数据
        var d=result.data;
    gd.putImageData(result,0,0);                              //将像素数据放在画布上
    gd.drawImage(oImg,x,y,w,h);         
    gd.drawImage(oImg,sx,sy,sw,sh,dx,dy,dw,dh);     //在画布上定位图像,而且规定宽高
        s代表起始
        d代表放在哪里
上一篇下一篇

猜你喜欢

热点阅读