Question

我在这个网站上找到了这个代码示例，但后来又找不到了。我已经和它一起工作了几个晚上。我想让pacman更小，然后能够使它成为我可以旋转和翻转方向的图像或对象。这种类型的绘图是否可行。

我尝试将所有的整数值都考虑在一起，这会让pacman变得更小而且它没有，并且给了我一个没有眼睛的有趣的圆圈。

问题：如何使这个图像可以移动并且必须有ctx.beginPath（）;在代码中？

代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapter 2 Example 28: Animating a Path</title>
<script src="modernizr.js"></script>

<body>

<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>

<script type="text/javascript">


   function eventWindowLoaded() {
        var theCanvas = document.getElementById('canvas');
        var ctx = theCanvas.getContext('2d');

        ctx.beginPath();
        ctx.arc(100, 100, 50, 0.25 * Math.PI, 1.25 * Math.PI, false);
        ctx.fillStyle = "rgb(255, 255, 0)";
        ctx.fill();

        ctx.beginPath();
        ctx.arc(100, 100, 50, 0.75 * Math.PI, 1.75 * Math.PI, false);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(100, 75, 10, 0, 2 * Math.PI, false);
        ctx.fillStyle = "rgb(0, 0, 0)";
        ctx.fill();
    }
        eventWindowLoaded();    
</script> 

</div>
</body>
</html>

Answer 1

您可以在单独的屏幕外画布上创建pacman。

然后，您可以使用drawImage将该画布绘制到可见画布上。

画得更大
画得更小
旋转它
给它制作动画。

包括动画的演示：http://jsfiddle.net/m1erickson/j2cNw/

enter image description here

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: white; }
    canvas{border:1px solid red; background-color:blue;}
</style>
<script>
window.onload=function(){

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

    // draw your pacman to an offscreen canvas
    var pac=makePacCanvas();

    // draw it on the visible canvas
    ctx.drawImage(pac,10,10);

    // make it smaller (50x50px)
    ctx.drawImage(pac,110,10,50,50);

    // make it larger (150x150px)
    ctx.drawImage(pac,10,125,150,150);

    // rotate it 60 degrees
    ctx.save();
    ctx.translate(225,200);
    ctx.rotate(Math.PI/3);  // PI/3==60 degrees 
    ctx.drawImage(pac,-50,-50);
    ctx.restore();


    function makePacCanvas(){

        var pacCanvas=document.createElement("canvas");
        var pacCtx=pacCanvas.getContext("2d");

        pacCanvas.width=100;
        pacCanvas.height=100;

        pacCtx.beginPath();
        pacCtx.arc(50, 50, 50, 0.25 * Math.PI, 1.25 * Math.PI, false);
        pacCtx.fillStyle = "rgb(255, 255, 0)";
        pacCtx.fill();

        pacCtx.beginPath();
        pacCtx.arc(50, 50, 50, 0.75 * Math.PI, 1.75 * Math.PI, false);
        pacCtx.fill();

        pacCtx.beginPath();
        pacCtx.arc(50, 25, 10, 0, 2 * Math.PI, false);
        pacCtx.fillStyle = "rgb(0, 0, 0)";
        pacCtx.fill();

        return(pacCanvas);
    }

    var x=200;
    var direction=1;
    animate();

    function animate(){

        requestAnimationFrame(animate);

        ctx.clearRect(175,0,300,100);
        if(direction==1){
            ctx.drawImage(pac,x,10,20,20);
        }else{
            ctx.save();
            ctx.translate(x+10,20);
            ctx.scale(-1,1);
            ctx.drawImage(pac,0,-10,20,20);
            ctx.restore();       
        }

        x+=direction;
        if(x<190 || x>300-20){ direction*=-1; }

    }


}; // end $(function(){});
</script>
</head>
<body>
    <h4>All pacmen are drawn using 1 offscreen canvas<br>as source for drawImage</h4>
    <canvas id="canvas" width=350 height=300></canvas>
</body>
</html>

Answer 2

var imageData = ctx.getImageData(x, y, width, height);

这将允许您抓取画布上的图像数据并重新使用或操纵它。

例如，您可以将图像绘制到画布上，然后抓取图像数据并存储以备将来使用。

修改

var canvas = document.createElement("canvas"); // this is not added to the DOM var ctx = canvas.getContext("2d"); // insert code to draw onto ctx, then get data ctx.fillStyle="red"; ctx.fillRect(0, 0, 50, 50); var imageData = ctx.getImageData(0, 0, 50, 50); // now you have the data, you can manipulate it/add it to other canvases // whenever you want, i.e. var pageCanvasCtx = document.getElementById("#canvas").getContext("2d"); pageCanvasCtx.putImageData(imageData, 0, 0);

如何将图像作为对象，以便我可以构建它一次然后继续使用它？

2 个答案: