(八)模式(就像是给元素添加背景图片)

createPattern()【2个参数,1页面上的img元素,2字符串、同background-repeat的值一样,设置是否平铺】
【图像是从画布的(0,0)点开始绘制的】

var canvas = document.getElementById("canvas");
    var img = document.images[0];
    img.onload = function(){
        if(canvas.getContext){
            var ctx = canvas.getContext("2d");

            //设置模式,
            var pattern = ctx.createPattern(img,"repeat");

            ctx.beginPath();

            ctx.fillStyle = pattern;//使用模式
            ctx.fillRect(10,10,380,200);//矩形的开始点只是觉得从图像的哪里开始显示图像

            ctx.stroke();
            ctx.closePath();
        }
    }
posted @ 2016-11-09 12:17  大厨的笔记  阅读(158)  评论(0编辑  收藏  举报