Question

我想在html画布上打印表情符号。

可以使用图像来完成，但是很麻烦。有更好的方法吗？

const canvas = document.querySelector("#canvas");
const contex = canvas.getContext("2d");

var img = new Image();
img.src = "emoji.jpg";
img.addEventListener(
  "load",
  () => {
    context.drawImage(img, 0, 0, 200, 200);
  }
);
img.src = "img.jpg";

#canvas {
  background: red;
}

<canvas id="canvas"></canvas>

编辑：

Okey，我认为我的问题被误解了。我可以在画布上绘制表情符号作为图像。我不想那样做。因为我必须先截图所有表情符号并裁剪它们，然后才能在画布上打印它们，这很麻烦。我正在寻找一种更有效的方法。

Answer 1

如果您不想使用图像，那么我这里有一个纯编码示例。如您所见，这需要更多的编码方法。

index.html

<!doctype html>
<html lang="en">
<head>
<title>Smiley Face</title>
<meta charset="utf-8" />

   <link rel="stylesheet" href="css/smiley.css" >

</head>
<body>
    <canvas width="600" height="600" id="smiley">
        <p>You need canvas!</p>
        <p>This example requires a browser that supports the
        <a href="http://www.w3.org/html/wg/html5/">HTML5</a> 
        &lt;canvas&gt; feature.</p>
    </canvas>
    <script src="js/smiley.js"></script>
</body>
</html>

smiley.js

//smileyView Object literal
class smileyComponent {
  constructor() {
    //initialise window, cv & ctx, drawSmiley & call drawsmiley
    this._window = this;
    this._cv = document.getElementById('smiley');
    this._ctx = this._cv.getContext('2d');
    this.drawSmiley();
  }
  //getters
  get window() {
    return this._window;
  }
  get cv() {
    return this._cv;
  }
  get ctx() {
    return this._ctx;
  }

  drawArc(x, y, radius, startAngle, endAngle, clockwise) {
    this._ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
  }
  drawLine(xs, ys, xe, ye) {
    this._ctx.moveTo(xs, ys);
    this._ctx.lineTo(xe, ye);
  }
  drawSmiley() {
    //initialise lineWidth & fillStyle
    this._ctx.fillStyle = "yellow";
    this._ctx.strokeStyle = "black";
    this._ctx.lineWidth = 5;

    //head
    this._ctx.beginPath();
    this.drawArc(300,300,200,smileyComponent.degreesToRadians(0),smileyComponent.degreesToRadians(360),true);
    this._ctx.fill();

    //left eye
    this._ctx.beginPath();
    this.drawArc(200,200,50,smileyComponent.degreesToRadians(0),smileyComponent.degreesToRadians(360),true);
    this._ctx.fillStyle = "black";
    this._ctx.fill();
    this._ctx.beginPath();
    this.drawArc(220,220,25,smileyComponent.degreesToRadians(0),smileyComponent.degreesToRadians(360),true);
    this._ctx.fillStyle = "white";
    this._ctx.fill();


    //right eye
    this._ctx.beginPath();
    this.drawArc(400,200,50,smileyComponent.degreesToRadians(0),smileyComponent.degreesToRadians(360),true);
    this._ctx.fillStyle = "black";
    this._ctx.fill();
    this._ctx.beginPath();
    this.drawArc(420,220,25,smileyComponent.degreesToRadians(0),smileyComponent.degreesToRadians(360),true);
    this._ctx.fillStyle = "white";
    this._ctx.fill();

    //nose
    this._ctx.beginPath();
    this.drawLine(300,350,300,250);
    this._ctx.stroke();


    //smile
    this._ctx.beginPath();
    this.drawArc(300,300,150,smileyComponent.degreesToRadians(160),smileyComponent.degreesToRadians(380),true);
    this._ctx.stroke();
  }

  static degreesToRadians(degrees) {
    return degrees * Math.PI / 180;
  }
}
window.onload = () => new smileyComponent();

您可以检查结果here。

Answer 2

我认为您的方法不正确。要使用CanvasRenderingContext2D.drawImage()方法，您需要加载图像，然后将其修改并绘制到画布上，因此还需要调整画布的大小。如果仅使用Unicode emoji characters提供的表情符号，该怎么办？

此示例将帮助您通过其codepoint值使用表情符号。我们只需要通过String.fromCodePoint方法传递一个十六进制代码。此方法返回使用指定的代码点序列创建的字符串。然后，我们可以将该字符串作为表情符号打印到画布中。该方法将花费大量时间来裁剪，调整大小和渲染每个表情符号。这是一个简短的示例：

let canvas1, canvas2, ctx1, ctx2;

let emoji = [];

let emo,
  size = 80,
  rad = 20;

let emojis = [
        0x1F600, 0x1F601, 0x1F603, 0x1F603, 0x1F604, 0x1F605, 0x1F606,
        0x1F607, 0x1F609, 0x1F60A, 0x1F642, 0x1F643, 0x1F355, 0x1F354,
];

for (let i = 0; i < 2; i++) {
  emoji.push({
    x: size,
    y: size,
    src: getEmoji()
  });
}


window.onload = function() {
  canvas1 = document.getElementById('canvas-01');
  ctx1 = canvas1.getContext('2d');
  loadEmoji(canvas1, ctx1, 0);


  canvas2 = document.getElementById('canvas-02');
  ctx2 = canvas2.getContext('2d');
  loadEmoji(canvas2, ctx2, 1);
}


function loadEmoji(canvas, ctx, index) {
  // Use the intrinsic size of image in CSS pixels for the canvas element
  canvas.width = w = size * 2.5;
  canvas.height = h = size * 2.5;

  ctx.font = size * 2 + 'px Arial';
  ctx.textBaseline = 'middle'; 
  ctx.textAlign = 'center';

  emo = emoji[index];
  emo.x = w/2;
  emo.y = h-size-10;

  ctx.fillText(emo.src, emo.x, emo.y);
}

function getEmoji() {
  let len = emojis.length;

  let emos = Math.floor(Math.random() * len);
  return String.fromCodePoint(emojis[emos]);
}

#canvas-01,
#canvas-02 {
  background: red;
}

<canvas id="canvas-01"></canvas>
<canvas id="canvas-02"></canvas>

注意

请记住，这可能不适用于所有浏览器，并且表情符号会根据显示它的操作系统进行更改。

Answer 3

您可以使用fillText绘制Unicode表情符号。

您可以从emojipedia复制并粘贴表情符号。

我当然不是专家，所以我不知道这样做是否有很大的弊端，但是无论如何，这里有一些需要考虑的事情。

这可能不适用于所有浏览器/操作系统。
除非使用自定义字体，否则标准的表情符号在浏览器/系统之间的外观可能会有所不同
您应该确保将js读为UTF-8才能正常工作。这是HTML5的标准配置，因此您可能无需更改任何东西，除非它对您不起作用。

const canvas = document.querySelector("#canvas");
const contex = canvas.getContext("2d");

// The size of the emoji is set with the font
contex.font = '100px serif'
// use these alignment properties for "better" positioning
contex.textAlign = "center"; 
contex.textBaseline = "middle"; 
// draw the emoji
contex.fillText('', canvas.width / 2, canvas.height / 2)

#canvas {
  background: #ccc;
}

<canvas id="canvas"></canvas>

如何有效地在画布上加载和绘制表情符号？

编辑：

3 个答案:

注意