旋转的三角形改变其中心HTML5_Html_Canvas

旋转的三角形改变其中心HTML5

html canvas

旋转的三角形改变其中心HTML5,html,canvas,Html,Canvas,我的程序有问题。我想旋转三角形几次，每次旋转都画出来，但三角形改变了它的位置（我希望它在屏幕中央）。三角形绘图在绘图功能中 <!DOCTYPE html> <html> <head> <script> var ctx, canvas; window.requestAnimFrame = (function(callback) { return (window.r

我的程序有问题。我想旋转三角形几次，每次旋转都画出来，但三角形改变了它的位置（我希望它在屏幕中央）。三角形绘图在绘图功能中

<!DOCTYPE html>
<html>
    <head>
        <script>
        var ctx, canvas;



        window.requestAnimFrame = (function(callback) {
            return (window.requestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.oRequestAnimationFrame || 
            window.msRequestAnimationFrame) &&
            function(callback) {
              window.setTimeout(callback, 1000/1 );
            };
      })();

            window.onload = function(){
                canvas = document.getElementById('myCanvas');
                ctx = canvas.getContext('2d');
                //sciana

                for(var i = 0; i < 6; i++){

                    drawLine(i);
                }

            }
            function drawLine(a){
            var bok = 400, xw = canvas.width/2, yw = 10, odstep = 10;
            var tX = 10/Math.sqrt(3);
                ctx.rotate(Math.PI /6); //here I rotate
                ctx.save();


                for(var i = xw; i >= xw - bok/2; i-=tX){
                    var r = Math.floor( 255 * Math.random());
                    var g = Math.floor( 255 * Math.random());
                    var b = Math.floor( 255 * Math.random());   
                    ctx.translate(10/Math.sqrt(3), 10);
                    ctx.beginPath();
                    ctx.fillStyle = "rgb("+r+","+g+","+b+")";
                    ctx.arc(xw, 0, 6, 0, 2 * Math.PI, false);
                    ctx.fill(); 
                    ctx.closePath();

                }   
                ctx.restore(); 
                ctx.save();
                    for(var i = xw; i >= xw - bok/2; i-=10/Math.sqrt(3)){
                    var r = Math.floor( 255 * Math.random());
                    var g = Math.floor( 255 * Math.random());
                    var b = Math.floor( 255 * Math.random());   
                    ctx.translate(-10/Math.sqrt(3), 10);
                    ctx.beginPath();
                    ctx.fillStyle = "rgb("+r+","+g+","+b+")";
                    ctx.arc(xw, 0, 6, 0, 2 * Math.PI, false);
                    ctx.fill(); 
                    ctx.closePath();
                }   
                ctx.restore();
                ctx.save();
                xw = xw - bok/2 ;
                yw = bok*Math.sqrt(3)/2;
                for(var i = xw; i <= xw + bok; i+=10){
                    var r = Math.floor( 255 * Math.random());
                    var g = Math.floor( 255 * Math.random());
                    var b = Math.floor( 255 * Math.random());   
                    ctx.translate(10,0);
                    ctx.beginPath();
                    ctx.fillStyle = "rgb("+r+","+g+","+b+")";
                    ctx.arc(xw, yw, 6, 0, 2 * Math.PI, false);
                    ctx.fill(); 
                    ctx.closePath();
                }
                ctx.restore();
                requestAnimFrame(drawLine); 

            }
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="600" style="background-color:#D0D0D0">
            Twoja przeglądarka nie obsługuje elementu Canvas.
        </canvas>
    </body>
</html>


var-ctx，canvas；
window.requestAnimFrame=（函数（回调）{
返回（window.requestAnimationFrame | |
window.webkitRequestAnimationFrame | |
window.mozRequestAnimationFrame | |
window.oRequestAnimationFrame | |
window.msRequestAnimationFrame）&&
函数（回调）{
设置超时（回调，1000/1）；
};
})();
window.onload=函数（）{
canvas=document.getElementById（'myCanvas'）；
ctx=canvas.getContext（'2d'）；
//sciana
对于（变量i=0；i<6；i++）{
抽绳（一）；
}
}
功能抽绳（a）{
var-bok=400，xw=canvas.width/2，yw=10，odstep=10；
var tX=10/数学sqrt（3）；
ctx.rotate（Math.PI/6）；//我在这里旋转
ctx.save（）；
对于（变量i=xw；i>=xw-bok/2；i-=tX）{
var r=Math.floor（255*Math.random（））；
var g=Math.floor（255*Math.random（））；
var b=Math.floor（255*Math.random（））；
ctx.translate（10/Math.sqrt（3），10）；
ctx.beginPath（）；
ctx.fillStyle=“rgb（“+r+”、“+g+”、“+b+”）；
ctx.arc（xw，0，6，0，2*Math.PI，false）；
ctx.fill（）；
ctx.closePath（）；
}   
ctx.restore（）；
ctx.save（）；
对于（var i=xw；i>=xw-bok/2；i-=10/Math.sqrt（3））{
var r=Math.floor（255*Math.random（））；
var g=Math.floor（255*Math.random（））；
var b=Math.floor（255*Math.random（））；
ctx.translate（-10/Math.sqrt（3,10）；
ctx.beginPath（）；
ctx.fillStyle=“rgb（“+r+”、“+g+”、“+b+”）；
ctx.arc（xw，0，6，0，2*Math.PI，false）；
ctx.fill（）；
ctx.closePath（）；
}   
ctx.restore（）；
ctx.save（）；
xw=xw-bok/2；
yw=bok*数学sqrt（3）/2；
对于（var i=xw；我知道它是如何围绕画布中心旋转的，所以你必须先将三角形的中心平移到画布中心，然后再旋转它，然后再将其平移回来？@Delta你能给我一个例子吗？假设你有一个等边三角形，边的长度是10。该三角形的高度是Math.sqrt（200）
，因此中心位于（5，Math.sqrt（200）/2）
。您在画布的中心绘制它，以便将其转换为原点，您只需ctx.translate（-canvas.width/2-5，-canvas.height/2-Math.sqrt（200）/2）
然后旋转，然后应用反向转换。