동적 패턴 및 색상으로 Html5 Canvas FillStyle을 설정하는 방법

Question

html5 캔버스를 사용하여 모양에 색상 및 패턴을 동적으로 설정하고 싶습니다. 패턴은 .png 이미지입니다. 주제를 연구 할 때 fillStyle = pattern 및 fillStyle = color를 혼합 할 수 없다는 것을 발견했습니다. 캔버스 모양은 그 중 하나만 가져옵니다. 전방에 배경색과 이미지 패턴을 동적으로 표현하고 싶습니다. 그게 가능하니?

어떤 아이디어라도 감사 할 것입니다.

Answer 1

두 번만 순환 경로를 그린다 고체 라임

• 처음 패턴

예 코드

번째 채우기 및 데모 :

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var cw = canvas.width; 
 
var ch = canvas.height; 
 

 

 
var img = new Image(); 
 
img.onload = start; 
 
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/star.png"; 
 

 
function start() { 
 

 
    ctx.beginPath(); 
 
    ctx.arc(150, 150, 130, 0, Math.PI * 2); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = 'lime'; 
 
    ctx.fill(); 
 

 
    var pattern = ctx.createPattern(img, 'repeat'); 
 
    ctx.fillStyle = pattern; 
 
    ctx.fill(); 
 

 
}

body { 
 
    background-color: ivory; 
 
} 
 
canvas { 
 
    border: 1px solid red; 
 
}

<canvas id="canvas" width=300 height=300></canvas>