Html5 Canvas - Javascript旋转，翻译

时间：2016-09-28 15:11:14

标签： javascript html5-canvas

以下是代码：

＆＃13;
＆＃13; 
$(function(){

    function printData() {
        // Iterate over all the school names
        for(var i = 0; i < schools.length; i++) {
            console.log(i);

            // Schools
            var schoolName = $(".school__name").eq(i).html(schools[i].name); // Name
            var schoolDistrict = $(".school__district").eq(i).html(schools[i].district); // District
            // var schoolCrest = // $(".school__image").attr("src", schools[i].crest) // Crest

            // Default
            var percentEnglish = $(".school__percentage").eq(i).html(schools[i].percentEnglish); // English
        }
    }

    function pickSubject() {
        $(".btn").click(function(){
            $(".btn").removeClass("is-selected");
            $(this).addClass("is-selected");

            // Button behavior
            if ($(this).hasClass("btn-english")) {
                $(".school__percentage").eq(i).html(schools[i].percentEnglish);
            } else if ($(this).hasClass("btn-math")) {
                var percentMath = $(".school__percentage").eq(i).html(schools[i].percentMath); // Math
            } else if ($(this).hasClass("btn-science")) {
                var percentScience = $(".school__percentage").eq(i).html(schools[i].percentScience); // Science
            } else if ($(this).hasClass("btn-social")) {
                var percentSocial = $(".school__percentage").eq(i).html(schools[i].percentSocial); // Social Science
            }
        });
    }

    printData();
    pickSubject();

});
＆＃13; 
<div class="widget high-school">
    <div class="widget__info">
        <p class="widget__category">High school</p>
        <p class="widget__title">Missouri Assessment Program standouts</p>
    </div>

    <div class="widget__buttons">
        <p class="widget__rank">Rank by:</p>
        <button class="btn btn-english is-selected">English</button>
        <button class="btn btn-math">Math</button>
        <button class="btn btn-science">Science</button>
        <button class="btn btn-social">Social Studies</button>
    </div>

    <div class="wrapper">
        <div class="schools">
            <div class="school" data-id="1">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="2">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="3">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="4">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="5">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="6">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="7">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="8">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="9">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="10">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="11">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="12">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="13">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="14">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="15">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="16">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="17">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="18">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="19">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->

            <div class="school" data-id="20">
                <img src="http://placehold.it/45x45" class="school__image">
                <div class="school__details">
                    <div class="school__name">tk-name</div>
                    <div class="school__district">tk-district</div>
                </div>
                <div class="school__percentage">-%</div>
            </div> <!-- school -->
        </div><!-- schools -->
    </div>
＆＃13;
＆＃13;
＆＃13;

我希望第3步中的翻译会将0,0放回左上角，但它不会。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.save();
//context.fillRect(0, 0, 10, 20);
  
// step 1
context.translate(canvas.width/2, canvas.height/2);
context.rotate(90 * Math.PI /180);
  
// step 2
context.fillRect(0, 0, 10, 20);
  
// step 3
context.translate(-canvas.width/2, -canvas.height/2);
  
context.fillRect(0, 0, 10, 20);
    
// step 4
context.translate(50, 0);
  
context.fillRect(0, 0, 10, 20);
context.restore();

是否有任何公式计算左上角并将其添加到步骤4的平移中，以便矩形在左上角旁边的50处可见？

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

0 个答案:

没有答案
相关问题
最新问题