旋转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度你需要记住旋转＆gt; = 90度使得物体垂直于平面因此无法看到它的厚度！

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