HTML 5-キャンバスのキャンバス移動操作の例

29718 ワード

先端

Html 5キャンバス操作の平行移動|translate()

DOCTYPE HTML>
<html>
<head>
    <title>  title>
head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
                 canvas   
    canvas>
    <br />
    <button type="button" onclick="drawIt();">       Demobutton>
    <button type="button" onclick="clearIt();">    button>

    <script type="text/javascript">

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

        var canvasX = 0;
        var canvasY = 0;

        var stepX = 20;
        var stepY = 20;

        function drawIt() {
            if (canvasX == 0 && canvasY == 0)
                ctx.strokeRect(0, 0, 100, 100);

            canvasX  = stepX;
            canvasY  = stepY;

            /*
             * context.translate(x, y) -                 
             *   x - x             
             *   y - y             
             */
            ctx.strokeStyle = "blue";
            ctx.translate(stepX, stepY);
            ctx.strokeRect(0, 0, 100, 100);
        }

        function clearIt() {
            ctx.translate(-canvasX, -canvasY);
            canvasX = 0;
            canvasY = 0;
            ctx.strokeStyle = "black";

            ctx.clearRect(0, 0, 400, 400);
        }

    script>
body>
html>

Google翻訳webページ

Tomcat 7ベースのHTML 5 WebSocketアプリケーションの例