Javascript 我如何使一个图像成为一个对象，这样我就可以构建它一次，然后继续使用它？_Javascript_Html_Canvas

Javascript 我如何使一个图像成为一个对象，这样我就可以构建它一次，然后继续使用它？

javascript html canvas

Javascript 我如何使一个图像成为一个对象，这样我就可以构建它一次，然后继续使用它？,javascript,html,canvas,Javascript,Html,Canvas,我在这个网站上找到了这个代码示例，但后来再也找不到了。我已经用它工作了好几个晚上了。我想把“吃豆人”变小，然后使它成为一个可以旋转和翻转方向的图像或对象。对于这种类型的图形，这是可能的我试着把所有的整数值都弄成一半，这样会使吃豆人变小，但它没有，给了我一个看起来很滑稽的没有眼睛的圆圈问题：如何使此图像能够四处移动，并且必须具有ctx.beginPath（）；在代码中？代码：第2章示例28：设置路径动画您的浏览器不支持HTML 5画布。函数eventWindowLoaded（）{ v

我在这个网站上找到了这个代码示例，但后来再也找不到了。我已经用它工作了好几个晚上了。我想把“吃豆人”变小，然后使它成为一个可以旋转和翻转方向的图像或对象。对于这种类型的图形，这是可能的

我试着把所有的整数值都弄成一半，这样会使吃豆人变小，但它没有，给了我一个看起来很滑稽的没有眼睛的圆圈

问题：如何使此图像能够四处移动，并且必须具有ctx.beginPath（）；在代码中？

代码：


第2章示例28：设置路径动画
您的浏览器不支持HTML 5画布。
函数eventWindowLoaded（）{
var theCanvas=document.getElementById（'canvas'）；
var ctx=canvas.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（）；

这将允许您获取画布上的图像数据，并重新使用或操作它

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

编辑：

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);

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

然后可以使用drawImage将该画布绘制到可见画布

把它画大一点
把它画小一点
旋转它
给它设置动画

包括动画的演示：


正文{背景色：白色；}
画布{边框：1px纯红；背景色：蓝色；}
window.onload=function（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//把你的吃豆人画到屏幕外的画布上
var pac=makePacCanvas（）；
//在可见的画布上绘制它
ctx.drawImage（pac，10,10）；
//使其更小（50x50px）
ctx.drawImage（pac，110,10,50,50）；
//使其更大（150x150px）
ctx.drawImage（pac，10125150150）；
//把它旋转60度
ctx.save（）；
翻译（225200）；
ctx.rotate（Math.PI/3）；//PI/3==60度
ctx.drawImage（pac，-50，-50）；
ctx.restore（）；
函数makePacCanvas（）{
var pacCanvas=document.createElement（“画布”）；
var pacCtx=pacCanvas.getContext（“2d”）；
宽度=100；
高度=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（）；
返回（pacCanvas）；
}
var x=200；
var方向=1；
制作动画（）；
函数animate（）{
请求动画帧（动画）；
ctx.clearRect（175,0300100）；
如果（方向==1）{
ctx.drawImage（pac，x，10,20,20）；
}否则{
ctx.save（）；
ctx.translate（x+10,20）；
ctx.刻度（-1,1）；
ctx.drawImage（pac，0，-10,20,20）；
ctx.restore（）；
}
x+=方向；
如果（x300-20）{方向*=-1；}
}
}; // end$（函数（）{}）；
所有pacmen均使用1块屏幕外画布
作为drawImage的源绘制

这是唯一的办法吗。你能在图像到达图像之前把它画成一个变量吗。是否有显示所有属性的ctx所有属性列表。@user3376708您可以绘制到尚未添加到DOM的画布中，例如（即在

appendChild

之前）。关于上下文的参考，您可以查看w3 html5草稿（），或者我看不到上面代码中屏幕上的动画移动。这个代码和您页面上的示例代码有什么不同吗。或者我的谷歌浏览器不支持这一点，这让我很难相信。执行$（函数（）{}）；就是JQuery代码，你可以在没有JQuery的情况下粘贴代码。谢谢，欢迎光临！上面的图像只是一个图像。单击演示链接以查看动画。我还编辑了上面的代码以包含动画。；-）在这段代码中根本不需要jQuery…如果需要，可以替换window.onload=function（）{…}。我在我所有的应用程序中都使用jQuery，因为它在消除浏览器不一致方面做得非常出色。祝你的项目好运！makePacCanvas（）---如何制作屏幕外画布图像。它不使用HTML页面主体中声明的画布的一部分吗；屏幕外的画布保存源pacman“图像”，然后对其进行操作并将图像绘制到可见画布（可见画布在html正文中创建）干杯

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);

<!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>