旋转html画布线条图案答案

【问题标题】：Rotate html canvas line pattern旋转html画布线条图案
【发布时间】：2017-01-25 00:47:30
【问题描述】：

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

【问题讨论】：

确保使用context.translate 将原点移动到旋转点。这是之前的Q&A 展示了如何围绕一个点旋转。
不起作用：jsfiddle.net/nt6ae1Ld/21
技术works 对我来说很好。只需根据您自己的设计需求进行调整即可。 :-)
谢谢markE。有用！更新 jsfiddle：jsfiddle.net/qb72o9sp/3

标签： javascript html canvas html5-canvas

【解决方案1】：

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

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

【讨论】：

感谢提示。不幸的是，结果还是一样。
谢谢，但没有更多的线条图案：/ 现在哪里是三角形而不是线条......