[html] 使用canvas制作一个印章
生活随笔
收集整理的這篇文章主要介紹了
[html] 使用canvas制作一个印章
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[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] 使用canvas制作一个印章的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [html] const nums1
- 下一篇： Matlab里DTW算法和图像