canvas居中小游戏
代码语言:html
所属分类:游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Cousine&display=swap"); * { box-sizing: border-box; padding: 0; margin: 0; } body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100' transform='rotate(45)' opacity='0.1' width='100' height='100'%3E%3Ccircle r='20' fill='hsl(128, 40%25, 45%25)' id='circle' /%3E%3Cg id='circles'%3E%3Cuse href='%23circle' y='30' opacity='0.3' /%3E%3Cuse href='%23circle' y='-30' opacity='0.3' /%3E%3C/g%3E%3Cuse href='%23circles' transform='rotate(90)' /%3E%3C/svg%3E"), hsl(0, 0%, 10%); background-size: 10px; color: hsl(30, 15%, 90%); font-family: "Cousine", monospace; } body > * + * { margin-top: 1.5rem; } button { display: block; color: inherit; font-family: inherit; color: inherit; text-transform: uppercase; letter-spacing: 2px; font-size: 1.25rem; font-weight: 700; padding: 0.75rem 1rem; border-radius: 5px; background: hsl(128, 40%, 45%); border: 4px solid hsl(128, 40%, 45%); outline: none; } button:focus { border-color: currentColor; box-shadow: 0 0 10px hsl(128, 40%, 45%); } </style> </head> <body translate="no"> <script> // html const { innerWidth, innerHeight } = window; const size = Math.min(400, innerWidth * 0.9, innerHeight * 0.9); const width = size; const height = size; const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; document.body.appendChild(canvas); const button = document.createElement('button'); button.textContent = 'Play'; document.body.appendChild(button); // canvas const context = canvas.getContext('2d'); context.translate(width / 2, height / 2); const lineWidth = 15; const radius = width / 2 - lineWidth / 2; context.lineWidth = lineWidth; context.fillStyle = 'hs.........完整代码请登录后点击上方下载按钮下载查看
网友评论0