Поворот html линии холста линии

Как я могу повернуть узор холста, нарисованный на холсте HTML?Поворот 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/

источник

2016-09-16 Tadej

Убедитесь, что вы переместите начало координат в точку поворота с помощью 'context.translate'. Вот предыдущий [Q & A] (http://stackoverflow.com/questions/17411991/html5-canvas-rotate-image/17412387#17412387), показывающий, как вращаться вокруг точки. – markE

Не работает: https://jsfiddle.net/nt6ae1Ld/21/ – Tadej

Техника [работает] (https://jsfiddle.net/qb72o9sp/) подходит для меня. Просто приспособите его к вашим собственным потребностям дизайна. :-) – markE

я уже вращал холст на 60 градусов, но если ваше требование вращается на 130 градусов и нужно иметь в виду, что степень вращения> = 90 делает объект, перпендикулярный плоскости, поэтому невозможно увидеть из-за его толщины!

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

источник

2016-09-16 18:34:07

Thx для подсказки. К сожалению, результат все тот же. – Tadej

Thx, но больше нет шаблона линии:/Теперь, где треугольники вместо строк ... – Tadej

Поворот html линии холста линии

ответ

Смежные вопросы