绘制图形_使用图像着色

• ctx.createPattern(img,repeatType)：定义图像样式，返回值是一个CanvasPattern对象。

  • img：是图像数据，它可以是<img>元素，也可以是另一个<canvas>元素。

  • repeatType：设置图片重复方式，有四个可能的值，分别是repeat（双向重复）、repeat-x(水平重复)、repeat-y(垂直重复)、no-repeat(不重复)。如果是空字符串或null，则等同于repeat。

    

xxxxxxxxxx
        // 定义img对象
        var img = new Image();
        //设置图片的加载路径
        img.src = '../assets/1.jpg';
        //图片加载完成后回调
        img.onload = function () {
            var pattern = ctx.createPattern(img, 'no-repeat');
            // 设置填充样式为图片
            ctx.fillStyle = pattern;
            //绘制矩形并填充
            ctx.fillRect(0, 0, 600, 600);
        };

实时效果反馈

1.下列描述错误的是：

A ctx.createPattern( )创建的对象可以用于设置fillStyle，strokeStyle

B 图片没有加载完调用ctx.createPattern(img,'' )最终页面上也能渲染出对应的img

答案

1=>B