js使用createPattern接口实现canvas图案repeat填充

use createPattern api to repeat images in canvas

canvas, image, pattern

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 198
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    repeatRadio = document.getElementById('repeatRadio'),
    noRepeatRadio = document.getElementById('noRepeatRadio'),
    repeatXRadio = document.getElementById('repeatXRadio'),
    repeatYRadio = document.getElementById('repeatYRadio'),
    image = new Image();

function fillCanvasWithPattern(repeatString) {
    var pattern = context.createPattern(image, repeatString);
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = pattern;
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fill();
};

repeatRadio.onclick = function(e) {
    fillCanvasWithPattern('repeat');
};

repeatXRadio.onclick = function(e) {
    fillCanvasWithPattern('repeat-x');
};

repeatYRadio.onclick = function(e) {
    fillCanvasWithPattern('repeat-y');
};

noRepeatRadio.onclick = function(e) {
    fillCanvasWithPattern('no-repeat');
};

image.src = '/assets/coolboy.jpg';
image.onload = function(e) {
    fillCanvasWithPattern('repeat');
};

编译

CSS

HTML

use createPattern api to repeat images in canvas

canvas, image, pattern

编辑器支持Emmet

快捷键

use createPattern api to repeat images in canvas

canvas, image, pattern

使用Particles.js实现的星空连接图

使用css-doodle.js实现的12个渐变（linear-gradient）图案背景

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：