javascript - 旋转 html Canvas 线条图案

Question

如何旋转在 HTML Canvas 上绘制的 Canvas 线条图案？

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

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

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