html5画布don'；从DOM中提取

我使用VisualFoxpro用html5画布绘制了一些图形。VFP是OOP软件，使用与DOM相同的逻辑代码。这里的apie是使用

internetexplorer.application

创建的对象。它也可以是嵌入在vfp表单上的activeX（浏览器）

olleclass=“Shell.explorer.2”

使用

createElement

我可以构建html5画布：

canvas=apie.document.createElement（“画布”）

我测试它正常

（对象、宽度、高度、样式…）

我使用以下内容创建二维上下文：

apie.document.getElementById("ycanvas1").getContext("2d") 

这是FoxPro和JavaScript的完整代码：

Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32 Integer HWnd, String lpstring
Declare Integer Sleep In kernel32 Integer
local apie
apie=Newobject("internetexplorer.application")
apie.Navigate("about:blank")
sleep(500)

With apie.Document
ycanvas = .createElement("canvas")
With ycanvas
    .Id = "ycanvas1"
    .Width=800
    .Height=700
    .Style.position = "absolute"
    .Style.Border   = "1px solid"
    .Style.zIndex="100"
    .style.background="gray"
    Endwith
  .body.appendChild(ycanvas)
 Endwith

 sleep(2000)

With apie

*drawings from vfp here
Local oo,canvas,ctx
canvas=.Document.getElementById("ycanvas1")
canvas.Style.background="bisque"
*Messagebox( trans(canvas.width)+"  "+trans(canvas.height))
ctx=canvas.getContext("2d")
ctx.beginPath()

ctx.lineWidth=5
ctx.arc(100,100,80,0,2*Pi())
ctx.strokeStyle="red"
ctx.stroke()
ctx.FillStyle="yellow"
ctx.Fill()

gradient=ctx.createLinearGradient(0,0,170,0)
gradient.addColorStop("0","magenta")
gradient.addColorStop("0.5","green")
gradient.addColorStop("1.0","red")

ctx.translate(200,0)
ctx.strokeStyle=gradient
ctx.lineWidth=5
ctx.strokeRect(20,20,150,100)
**************************
ctx.translate(-100,0)
ctx.Font="22px Georgia"
ctx.FillStyle="green"
ctx.fillText("Hello World! VFP",0,180)
************************
 gradient=ctx.createLinearGradient(0,0,170,0)
 gradient.addColorStop("0","magenta")
 gradient.addColorStop("0.5","green")
 gradient.addColorStop("1.0","red")

* Fill with gradient
ctx.FillStyle=gradient
ctx.lineWidth=5
ctx.fillRect(20,210,150,100)

******************************
*javascript from here
TEXT to m.myvar noshow
var canvas=document.getElementById("ycanvas1");
ctx=canvas.getContext("2d");

ctx.translate(-100,350);
ctx.beginPath();
ctx.lineWidth="5";
ctx.arc(100,100,80,0,2*Math.PI);
ctx.strokeStyle="red";
ctx.stroke();
ctx.fillStyle="yellow";
ctx.fill();

var  gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","green");
gradient.addColorStop("1.0","red");

 ctx.translate(200,0);
 ctx.strokeStyle=gradient;
 ctx.lineWidth=5;
 ctx.strokeRect(20,20,150,100);
//////////////////////////
ctx.translate(-100,0);
ctx.font="22px Georgia";
ctx.fillStyle="green";
ctx.fillText("Hello World! Javascript ",0,200);
/////////////////////////
gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","green");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.lineWidth=5;
ctx.fillRect(20,210,150,100);
ENDTEXT

 With apie.Document
    x=.createElement("SCRIPT")
    x.Id="yscript"
    T =.createTextNode(m.myvar)
    x.appendChild(T)
    .body.appendChild(x)
Endwith
Sleep(2000)

.menubar=0
.Toolbar=0
.StatusBar=0
.Height=680
.Width=800
.Left=(Sysmetric(1)-.Width)/2
.Visible=.T.
BringWindowToTop(.HWnd)
SetWindowText(.HWnd, "Html5 canvas from VFP and from Javascript")
Endwith

意见：

• 圆圈根本没有画出来
• 渐变也可以（仅一种颜色）
• 矩形被绘制出来

已更新

所以我看到任何人都可以回答这个奇点
那么给我一些关于这些的信息：

• 如果除了JavaScript还有其他软件可以绘制，那么它的起点或术语是什么……我们可以使用VB中的canvas for ex。它非常类似于vfp
• 我们是否可以直接在画布上使用DOM绘制（从脚本外部作为JavaScript绘制？）
• 为什么Visual FoxPro可以绘制（其OOP语言为DOM）矩形、文本、createElement为画布、上下文（'2d'）、createElement（'img'）…
  它在画布上做了很多事情，但有些失败了，比如画一条简单的线或圆，或者像上面的代码所示设置一个渐变

---

提前感谢您的帮助。

本机Html5画布绘图只能通过javascript完成。一些语言，如Java，提供了包装画布上下文（CanvasRenderingContext2D）属性和方法的接口。在我看来，即使javascript作为主要脚本浏览器广泛使用，它的排他性也是人为的，似乎是垄断。DOM在原则上是相同的，独立于平台（不使用Javascript），并且应该毫无问题地跨越html5画布！（）但是除了商业之外，真相在哪里呢！马克：谢谢你。好吧，你可以使用不带JavaScript（=无画布）的Html，就像你可以买不带土豆的牛排一样。我喜欢牛排配土豆，Html配Canvas/JavaScript。你可以用GDI画画——哦，等等，GDI最初不是FoxPro的一部分。。。好的，你可以是一个纯粹主义者，用字母“X”来绘制你的图形，就像我们在DOS时代所做的那样：-撇开玩笑不谈，JavaScript已经成为当今网站不可或缺的一部分，对我们大多数人来说已经没有回头路了。：-）不，Gdiplus是VisualFoxpro9中的原生版本，gdiplusX是一个包含600多个API库的完整包装，可以使用vfp9绘制。有了这一点，就没有问题可以在万维网上制作出可能的高级绘图。HTML5 Canvas的优点是不加载任何本机库。所有内容都在导航器中。唯一的大问题是每个导航器的兼容性（在将来，也许标准（W3c）可以解决这个问题）。欢迎访问我的博客（3个月前开放）：