Question

我正在尝试构建一种允许您将文本放在图像上的生成器。现在一切都很好，但我正在尝试创建一些缩略图，让我更改画布的背景图像。

现在这是我第一次尝试使用画布，我已经尝试了很多东西，但是我最接近的地方以及我认为我的一小段代码可以使用的地方，它给了我0个错误：

function testbackgroundchange() {
        img.src = "background_1.jpg";
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        document.getElementById('scale').value = 1;
        document.getElementById('rotate').value = 0;
        x = canvas.width/2 - img.width/2;
        y = canvas.height/2 - img.height/2;
        ctx.drawImage(img,x,y);
        imgTransform();
}

所以我在这里尝试的是点击缩略图，更改画布的背景图像。我添加了一个JSFiddle来更好地理解这个问题：http://jsfiddle.net/29M7P/1/

如果有人能指出我正确的方向那将是伟大的。（抱歉，我是初学者）

Answer 1

您可以使用thumbnail.onclick

收听缩略图上的点击次数

img1.onclick=function(){changeImage(this);};
img2.onclick=function(){changeImage(this);};

您可以像这样更改画布图像：

function changeImage(img){
    ctx.clearRect(0,0,cw,ch);
    ctx.drawImage(img,0,0);
}

演示：http://jsfiddle.net/m1erickson/88n3K/

代码示例：

<!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: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;

    var imgCount=2;
    var img1=new Image();img1.crossOrigin="anonymous";img1.onload=start;img1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg";
    var img2=new Image();img1.crossOrigin="anonymous";img2.onload=start;img2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg";

    function start(){
        if(--imgCount>0){return;}

        document.body.appendChild(img1);
        document.body.appendChild(img2);

        img1.onclick=function(){changeImage(this);};
        img2.onclick=function(){changeImage(this);};

    }

    function changeImage(img){
        ctx.clearRect(0,0,cw,ch);
        ctx.drawImage(img,0,0);
    }


}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <h4>Click on an image below to drawImage to canvas</h4><br>
</body>
</html>

单击时更改画布图像

1 个答案: