[html] 使用canvas制作一个印章
<!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>
个人简介
我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
)
)
![[html] 写个布局，当页面高度不够时，底部固定在下面，反之不固定](http://pic.xiahunao.cn/[html] 写个布局，当页面高度不够时，底部固定在下面，反之不固定)
![[html] 使用递归时应该注意哪些问题？](http://pic.xiahunao.cn/[html] 使用递归时应该注意哪些问题？)
