有没有类似于在js中绘制位图的方法

Question

在C#中，您可以创建位图，在它们上绘制，然后可以绘制那些缓存的位图。

public Form1()
{
InitializeComponent();
surface = new Bitmap(640, 480);
var g = Graphics.FromImage(surface);
g.DrawRectangle(Pens.Red, 10, 10, 10, 10);
}
Bitmap surface;
private void Form1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawImage(surface, 0, 0);
}

在javascript中有办法做到这一点吗？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

Answer 1

画布是一个可绘制的图像

函数的CanvasRenderingContext2D.drawImage((第一个参数是一个图像，或者更具体地说是一个包含HTMLCanvasElement的CanvasImageSource。

示例

示例在can1上绘制圆弧，然后使用drawImage在can2上绘制can1。

注意它绘制像素，路径不会在第二个画布上重新绘制。

注意画布是"双缓冲"；这意味着你也可以把画布画成

var ctx1 = can1.getContext("2d");
var ctx2 = can2.getContext("2d");
ctx1.beginPath();
ctx1.arc(64, 64, 60, 0, 2 * Math.PI);
ctx1.stroke();
ctx2.drawImage(can1, 0, 0);

canvas { border: 1px solid black}

<canvas id="can1" width="128" height="128"></canvas>
<canvas id="can2" width="128" height="128"></canvas>

Answer 2

您可以将该图形缓存为png或jpeg base64字符串，然后也可以将其放入任何图像标记或其他画布中。在这里，我已经将该图像缓存在png数据中，并绘制在下面的图像标签上：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
var dt = c.toDataURL('image/png');
CANVAS_DATA.src = dt;

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<img id="CANVAS_DATA">

如果您需要更多信息，请询问。