<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title></head><body> <div id="app"></div></body><script> var dataUrl = ''; function createStampUrl() { var canvas = document.createElement('canvas'); canvas.width = 300; canvas.height = 200; canvas.setAttribute('width', 300); canvas.setAttribute('height', 200); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.ellipse(150, 100, 100, 50, 0, 0, Math.PI * 2); ctx.fillStyle = "red"; ctx.strokeStyle = "red"; ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.ellipse(150, 100, 90, 40, 0, 0, Math.PI * 2); ctx.fillStyle = "white"; ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.ellipse(150, 100, 70, 30, 0, 0, Math.PI * 2); ctx.strokeStyle = "red"; ctx.lineWidth = 2; ctx.stroke(); ctx.closePath(); ctx.font = "14px Microsoft YaHei"; ctx.fillStyle = "red"; ctx.fillText("hello canvas", 110, 105); dataUrl = canvas.toDataURL("image/jpeg"); var app = document.querySelector("#app"); app.style.width = "300px"; app.style.height = "300px"; app.style.backgroundImage = `url(${dataUrl})`; app.style.backgroundRepeat = 'no-repeat'; } createStampUrl();</script></html>
