为画布背景选择不同的图像 [英] select different image for canvas background
问题描述
我需要知道如何更改画布中的图像背景以绘制所选图像中需要的内容？
I need to know how can I change the image background in canvas to draw what is needed in the selected image?
我使用此脚本 William malone canvas
我可以保存图片DB ...我唯一不知道的是如何更改背景..
I use this script William malone canvas and I can save the image in DB...the only thing I don't figure is how can I change the background..
EDITED--
我的问题是如何改变画布中的背景图像没有重新加载页面...每个例子都有一个选择列表或复选框或单选按钮
EDITED-- My question is how can I change the background image in canvas WITHOUT reload the page...per example with a select list or checkbox or radio button
这样但需要更改而不重新加载页面
like this but need to change without reload the page
推荐答案
更改图像背景很简单，你只需要编写一个函数并执行此操作：
change the image background is very simple,you just need to write a function and do this:
outlineImage.src = "your image src";
然后背景图片会改变！你可能试试。
then background image will changed! You may have a try.
这是你想要的吗？
您应该加载所需的js文件在该函数之前，并确保js文件是可用的，尤其是html5-canvas-drawing-app.js，它是核心函数，prepareCanvas和outlineImage在此文件中定义。
You should load needed js files before that function,and be sure that js file is avaliable,especially html5-canvas-drawing-app.js,It's the core function,prepareCanvas and outlineImage are defined in this file.
<!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>
如果它还没有工作，我可以写一个例子发送给你。
If it doesn't work yet,I can write an example send to you.
这篇关于为画布背景选择不同的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
