绘图不会显示在网页上答案

【问题标题】：drawing will not shown on webpage绘图不会显示在网页上
【发布时间】：2009-10-06 16:04:54
【问题描述】：

我想在我的网页上画一个圆圈，所以我下载了两个不同的 javascript 来画一个圆圈。其中一个 js 文件是从 http://jsdraw2d.jsfiction.com/ 下载的然后我已经使用它的功能来绘制圆圈但圆圈没有显示在我尝试的 html 页面上 Internet Explorer 和 Mozilla firefox 都没有，但它既不会出错，也不会画圈那么这背后的原因是什么。使用两个 js 文件时会出现同样的问题。

提前致谢

<HEAD>
 <TITLE> New Document </TITLE>
 <script type="text/javascript" src="wz_jsgraphics/wz_jsgraphics.js"></script>
 <script type="text/javascript">
 function myDrawFunction()
 {


      jg2.setColor("#0000ff"); // blue
      jg2.drawEllipse(10, 50, 230, 100);
      jg2.drawRect(400, 10, 100, 50);
      jg2.paint();
       alert("hi");
}
var jg2 = new jsGraphics(document.getElementById("canvas"));
</script>

<BODY >
<div id="canvas" style="overflow:hidden;position:relative;width:600px;height:300px;"></div> 
<input type="submit" onclick="myDrawFunction()" value="Click"> 
<p> hi this is paragraph</p>
</div>
</BODY>

【问题讨论】：

一些示例代码在这里会有很大帮助...
使用提交按钮调用 javascript 不是最好的主意...
你的第二个
也是错误的 - 删除它

标签： javascript html drawing

【解决方案1】：

您在页面加载之前使用 document.getElementById！

var jg2 = new jsGraphics(document.getElementById("canvas"));

解析后立即在您的脑海中调用。

改成：

var jg2 = null;
function myDrawFunction()
 {
    if(jg2 == null)
       jg2 = new jsGraphics(document.getElementById("canvas"));
    jg2.setColor("#0000ff"); // blue
    jg2.drawEllipse(10, 50, 230, 100);
    jg2.drawRect(400, 10, 100, 50);
    jg2.paint();
    alert("hi");
}

【讨论】：