有没有相当于在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

您可以将该绘图缓存为 png 或 jpeg base64 字符串，然后您可以将其放入任何图像标签或其他 canvas。在这里，我将该图像缓存在 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">

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

Answer 2

Canvas 是可绘制的图像。

函数的CanvasRenderingContext2D.drawImage() first argument is an image or more specifically a CanvasImageSource which includes the HTMLCanvasElement.

例子

示例在 can1 上绘制弧线，然后使用 drawImage.

在 can2 上绘制 can1

注意它画的是像素，第二次画的时候路径没有重绘canvas.

注意 canvas 是“双缓冲”的，这意味着您还可以将 canvas 绘制到自身

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>

有没有相当于在js中绘制位图

is there a equivalent to drawing on a bitmap in js

javascript

c#

winforms

html5-canvas

Canvas 是可绘制的图像。

例子