Javascript procedural image
Is it possible to create in javascript(without connecting to server) image, that after creation can be placed开发者_如何学JAVA on website? In example, I send only formula from server, and client creates image based on it which I can use as jpg/png/bmp background(and do repeating etc).
Yes. There is a canvas element in HTML5. It can be used for 2d images and 3d animations etc.
Here is a set of tutorials about it.
Do you mean something like this:
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 + ")";
Demo and with text
If you want a cross browser solution look into Raphael.
精彩评论