javascript - How to draw Tilted Rectangle in Html 5 Canvas? - Stack Overflow

admin管理员组

文章数量:1023108

Let say I have x, y, width and height. I need to draw a inclined/tilted Rectangle at particular angle. I cannot use context.rotate. Because it is changing other shapes of canvas.

Let say I have x, y, width and height. I need to draw a inclined/tilted Rectangle at particular angle. I cannot use context.rotate. Because it is changing other shapes of canvas.

• javascript
• jquery
• html
• html5-canvas

Share Improve this question Follow asked Mar 15, 2012 at 11:06 Imran Qadir Baksh - BalochImran Qadir Baksh - Baloch 34.1k6969 gold badges195195 silver badges348348 bronze badges 3

• tulrich./geekstuff/canvas/perspective.html – CraigTP Commented Mar 15, 2012 at 11:21
• Can you please show me the code? – Imran Qadir Baksh - Baloch Commented Mar 15, 2012 at 11:26
• 1 You can see the code by viewing the source of the page (HTML) along with the linked jsgl.js file. – CraigTP Commented Mar 15, 2012 at 11:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You can use context.rotate, you just have to undo the rotation before you draw the other shapes. Like this:

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.rect(88, 50, 200, 100);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

context.rotate(0.5);
context.beginPath();
context.rect(138, 120, 200, 100);
context.fillStyle = "#FE8E9D";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

context.rotate(-0.5);
context.beginPath();
context.rect(188, 190, 200, 100);
context.fillStyle = "#FEEF8E";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

Let say I have x, y, width and height. I need to draw a inclined/tilted Rectangle at particular angle. I cannot use context.rotate. Because it is changing other shapes of canvas.

Let say I have x, y, width and height. I need to draw a inclined/tilted Rectangle at particular angle. I cannot use context.rotate. Because it is changing other shapes of canvas.

• javascript
• jquery
• html
• html5-canvas

Share Improve this question Follow asked Mar 15, 2012 at 11:06 Imran Qadir Baksh - BalochImran Qadir Baksh - Baloch 34.1k6969 gold badges195195 silver badges348348 bronze badges 3

• tulrich./geekstuff/canvas/perspective.html – CraigTP Commented Mar 15, 2012 at 11:21
• Can you please show me the code? – Imran Qadir Baksh - Baloch Commented Mar 15, 2012 at 11:26
• 1 You can see the code by viewing the source of the page (HTML) along with the linked jsgl.js file. – CraigTP Commented Mar 15, 2012 at 11:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You can use context.rotate, you just have to undo the rotation before you draw the other shapes. Like this:

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.rect(88, 50, 200, 100);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

context.rotate(0.5);
context.beginPath();
context.rect(138, 120, 200, 100);
context.fillStyle = "#FE8E9D";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

context.rotate(-0.5);
context.beginPath();
context.rect(188, 190, 200, 100);
context.fillStyle = "#FEEF8E";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

本文标签： javascriptHow to draw Tilted Rectangle in Html 5 CanvasStack Overflow