canvascreatePattern

Posted 2020-09-07 鲜荣彬

/**
 * Created by xianrongbin on 2017/3/9.
 * 图片填充
 */
var dom = document.getElementById(‘clock‘),
    ctx = dom.getContext(‘2d‘),
    cirucle = Math.PI;

var bgImage=new Image();

bgImage.src=‘bk.jpg‘;

bgImage.onload=function () {
    //repeat-x,repeat-y,repeat,no-repeat
    var patternStyle=ctx.createPattern(bgImage,‘no-repeat‘);
    ctx.fillStyle=patternStyle;
    ctx.fillStyle(0,0,ctx.canvas.width,ctx.canvas.height);
};


/**
 * demo2 createPattern 提供一种方式，使得我们可以自己绘制自己喜欢的图案
 */

var dom1 = document.getElementById(‘canvasItem‘),
    ctx1 = dom1.getContext(‘2d‘);

var backCanvas=createBgCanvas();
var patternOne=ctx1.createPattern(backCanvas,‘repeat‘);
ctx1.fillStyle=patternOne;
ctx1.fillRect(0,0,ctx1.canvas.width,ctx1.canvas.height);

function createBgCanvas(){
    var backCanvas=document.createElement(‘canvas‘);
    backCanvas.width=100;
    backCanvas.height=100;
    var backCanvasContext=backCanvas.getContext(‘2d‘);
    drawStar(backCanvasContext,50,50,50,25,0);
    return backCanvas;
}

function drawStar(ctx, x, y, outerR, innerR, rot) {
    ctx.beginPath();
    for (var i = 0; i < 5; i++) {
        var ourRad = (18 + i * 72 - rot) / 180 * cirucle,
            innerRad = (54 + i * 72 - rot) / 180 * cirucle;

        ctx.lineTo(Math.cos(ourRad) * outerR + x,
            -Math.sin(ourRad) * outerR + y);

        ctx.lineTo(Math.cos(innerRad) * innerR + x,
            -Math.sin(innerRad) * innerR + y);
    }
    ctx.closePath();

    ctx.fillStyle = ‘#c1c‘;
    ctx.strokeStyle = ‘#fd5‘;
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.fill();
}