canvas（五）createPattern

/**
 * 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(,,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(,,ctx1.canvas.width,ctx1.canvas.height);

function createBgCanvas(){
    var backCanvas=document.createElement('canvas');
    backCanvas.width=;
    backCanvas.height=;
    var backCanvasContext=backCanvas.getContext('2d');
    drawStar(backCanvasContext,,,,,);
    return backCanvas;
}

function drawStar(ctx, x, y, outerR, innerR, rot) {
    ctx.beginPath();
    for (var i = ; i < ; i++) {
        var ourRad = ( + i *  - rot) /  * cirucle,
            innerRad = ( + i *  - rot) /  * 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 = ;
    ctx.stroke();
    ctx.fill();
}