<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Canvas.aspx.cs" Inherits="H5Canvas.ASPX.Canvas" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
canvas{
position: absolute;
}
</style>
</head>
<body onload="draw('myCanvas')">
<button onclick="drawsmall()">添加canvas</button>
<button onclick="clearcanvas()">清空</button>
<button onclick="show()">清空</button>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclientclick="drawsmall()" />
<div id="divcanvas">
<canvas id="myCanvas" width="1800" height="1000" style="height:500px;width:1000px;border:1px red solid"></canvas>
</div>
</div>
</form>
<script>
function draw(id) {
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
//context.fillStyle = "#0000FF";
//context.fillRect(0, 0, 400, 650);
image = new Image();
image.src = "/Content/img/background_1.jpg";
image.onload = function () {
DrawBigImage(context, image);
}
}
function DrawBigImage(context, image) {
context.drawImage(image, 0, 0, image.width, image.height);
}
function drawsmall() {
var json = <%=ConvertGoodsToJson()%> ;
var obj = eval (json.Table);
for (var i =0 ; i<obj.length ; i++)
{
var newcanvas = document.createElement("canvas");
newcanvas.id = 'newcanvas';
newcanvas.width = 2000;
newcanvas.height = 500;
var divcanvas = document.getElementById('divcanvas');
divcanvas.appendChild(newcanvas);
var canvas = document.getElementById("newcanvas");
var context = canvas.getContext("2d");
image = new Image();
image.src = obj[i].URL;
var q=obj[i].URL;
var w=obj[i].XAXES;
var e=obj[i].YAXES;
image.onload = function () {
context.drawImage(image, obj[i].XAXES, obj[i].YAXES, image.width, image.height);
}
}
}
function clearcanvas() {
var clear = document.getElementById("newcanvas");
// clear.parentNode.removeChild(clear);
clear.remove();
}
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.OracleClient;
using System.Text;
namespace H5Canvas.ASPX
{
public partial class Canvas : System.Web.UI.Page
{
public static string connStr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
public static DataTable ExecuteDatatable(string sql)
{
using (OracleConnection conn = new OracleConnection(connStr))
{
conn.Open();
using (OracleCommand cmd = new OracleCommand(sql, conn))
{
OracleDataAdapter adapter = new OracleDataAdapter(cmd);
DataSet dataset = new DataSet();
adapter.Fill(dataset);
return dataset.Tables[0];
}
}
}
public string ConvertDataTableToJson(DataTable dt)
{
StringBuilder sbs = new StringBuilder();
if (dt.Rows.Count > 0)//如果有记录
{
sbs.Append("{'" + dt.TableName + "':[");
string str = "";
foreach (DataRow dr in dt.Rows)//开始拼
{
string result = "";
foreach (DataColumn dc in dt.Columns)
{
result += string.Format(",'{0}':'{1}'",
dc.ColumnName, dr[dc.ColumnName]);
}
result = result.Substring(1);
result = ",{" + result + "}";
str += result;
}
str = str.Substring(1);
sbs.Append(str);
sbs.Append("]}");
}
else//如果没有记录
{
sbs.Append("");
}
return sbs.ToString();
}
public string ConvertGoodsToJson()
{
DataTable dt = new DataTable();
dt = ExecuteDatatable("select * from t_canvas where property='1'");
return ConvertDataTableToJson(dt);
}
}
}
不知道为什么点击Submit或者添加canvas的按钮都不会画出来图片，用火狐测试数据都是读出来了的（q，w，e这些），但就是画不出来，望高手指点，谢谢！
image.onload = function () {
context.drawImage(image, obj[i].XAXES, obj[i].YAXES, image.width, image.height);
}
这个方法根本就不执行，前面的大图是画出来了的，小图不知道为啥话不出来