HTML 캔버스 라인 패턴 회전

Question

HTML 캔버스에 그려진 캔버스 라인 패턴을 어떻게 회전시킬 수 있습니까?

var canvas = document.createElement('canvas'); 
var context = canvas.getContext("2d"); 

var canvasPattern = document.createElement("canvas"); 
canvasPattern.width = 10; 
canvasPattern.height = 20; 
var contextPattern = canvasPattern.getContext("2d"); 

contextPattern.fillStyle = 'red'; 
contextPattern.fillRect(0, 0, 20, 10); 
//contextPattern.rotate(130); 

https://jsfiddle.net/nt6ae1Ld/18/

근무 예 : https://jsfiddle.net/qb72o9sp/3/

Answer 1

은 이미 60도에서 캔버스를 회전했지만 귀하의 요구 사항은 130도 회전하는 경우 u는 염두에 두어야 할 필요가 회전> = 90도 따라서 평면에 수직으로 객체를 만들어서 두께 때문에 그 캔트를 볼 수 있습니다!

contextPattern.rotate(60 * Math.PI/180);