javascript - 旋转html Canvas 线条图案

如何旋转在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/

最佳答案

我已经将画布旋转了60度，但是如果您的要求是将画布旋转130度，则需要记住，旋转> = 90度会使物体垂直于平面，因此由于其厚度而无法看到！

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