[html] 第349天 使用canvas制作一个印章 #2159
Labels
html
html
Comments
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
第349天 使用canvas制作一个印章
我也要出题
The text was updated successfully, but these errors were encountered: