Canvas基础3

作者: Brighten_Sun | 来源:发表于2017-01-24 09:56 被阅读0次

    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代表放在哪里
    

    相关文章

      网友评论

        本文标题:Canvas基础3

        本文链接:https://www.haomeiwen.com/subject/cjjzbttx.html