canvas文字填充碎花石化效果代码
代码语言:html
所属分类:背景
代码描述:canvas文字填充碎花石化效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; font-family: sans-serif; background: #ffc0cb; min-height: 100vh; display: grid; place-items: center; } canvas { width: calc(90vh * 0.707); height: 90vh; box-shadow: 1px 5px 25px #777; } #source { display: none; position: absolute; } </style> </head> <body translate="no" > <canvas id="source"></canvas> <canvas id="destination"></canvas> <script> function drawSource() { let canvas = document.querySelector("#source"); let context = canvas.getContext("2d"); let dpr = window.devicePixelRatio || 1; let width = 860; //window.innerWidth; let height = 1240; //window.innerHeight; canvas.width = width * dpr; canvas.height = height * dpr; context.fillStyle = "white"; context.fillRect(0, 0, width, height); context.fillStyle = "black"; context.font = "210px 'Jost'"; //context.textBaseline = "top"; let step = context.measureText("ORDER").width; for (let y = 235; y < height; y += 235) { context.fillText("BFWWI", (width - step) / 2, y); } } function draw() { let canvas = document.querySelector("#destination"); let source = document.querySelector("#source"); let context = canvas.getContext("2d"); let dpr = window.devicePixelRatio || 1; let w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0