Question

我需要知道如何更改画布中的图像背景以绘制所选图像中所需的内容？

我使用此脚本William malone canvas 我可以将图像保存在DB中...我唯一不知道的是如何更改背景..

EDITED-- 我的问题是如何在不重新加载页面的情况下更改画布中的背景图像...每个例子都有一个选择列表或复选框或单选按钮

喜欢这样但需要在不重新加载页面的情况下进行更改

pies face

Answer 1

更改图像背景非常简单，您只需要编写一个函数并执行此操作：

outlineImage.src = "your image src";

然后背景图片会改变！你可以尝试一下。

这是你想要的吗？

make a select list

change selected option to change background

你应该在该函数之前加载所需的js文件，并确保js文件是可用的，尤其是html5-canvas-drawing-app.js，它是核心函数，prepareCanvas和outlineImage在这个文件中定义。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Create HTML5 Canvas JavaScript Drawing App Example</title>
  </head>

  <body>

    <div id="canvasDiv"></div>

    <!--src link write in attribute name or id,I suggest that-->
    <select id="changeSrc">
        <option name="images/1.png">Bg1</option>
        <option name="images/2.png">Bg2</option>
    </select>

    <!-- Load js Files -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="html5-canvas-drawing-app.js"></script>

    <script type="text/javascript"> 
    $(document).ready(function() {
         prepareCanvas();
    });

    $("#changeSrc").change(function(){
      var src=$(this).children(':selected').attr('name');    //get selected option's name
      outlineImage.src=src;                                  //change background!
    });
    </script>

  </body>
</html>

如果它还没有用，我可以写一个例子寄给你。

为画布背景选择不同的图像

1 个答案: