JavaScript 程序图像

Question

是否可以在javascript（无需连接到服务器）中创建图像，创建后可以将其放置在网站上？例如，我仅从服务器发送公式，客户端根据它创建图像，我可以将其用作 jpg/png/bmp 背景（并重复等）。

Answer 1

是的。 HTML5 中有一个 canvas 元素。它可用于 2d 图像和 3d 动画等。

这里是一组关于它的教程。

您的意思是这样的：

var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var centerX = 70;
    var centerY = 70;
    var radius = 70;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = "black";
    context.stroke();

var img = canvas.toDataURL("image/png");
/*
   returns "data:image/png;base64,iVBORw0KGg...."
   it can be used wherever you want:
    -images 
    -style 
    -etc
*/
var b = document.getElementById("foo");
b.style.backgroundImage = "url(" + img + ")";

演示 和 带文字

Answer 2

如果您想要跨浏览器解决方案，请查看 Raphael。