Home > Article > Web Front-end > The following code canvas rotate rotates. Where is the coordinate point of the rotation? Why is it not at the center point of the element? _html/css_WEB-ITnose
The following code canvas rotate rotates. Where is the coordinate point of the rotation? Why is it not at the center point of the element? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:211524browse
The following code canvas rotate rotates. Where is the coordinate point of the rotation? Why is it not at the center point of the element?
=================================
< style>
<script> <br> <br> function init() <br> { <br> var canvas = document.getElementById('canvas'); <br> var cxt = canvas.getContext('2d'); <br> cxt.strokeStyle = "red"; <br> cxt.strokeRect(300,300,100,100); cxt.rotate( 10*Math.PI/180); <br> cxt.strokeRect(300,300,100,100); <br> cxt.strokeStyle = "green"; <br> cxt.rotate(20*Math.PI/180); <br> cxt .strokeRect(300,300,100,100); <br> } <br> </script>
Reply to the discussion (solution)
Canvas rotation is actually the rotation of the canvas. The center point of rotation is the origin of the canvas, which is point 0,0.
If you want to rotate the center, just set the origin of the canvas.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn