搜索到
9
篇与
的结果
-
基础使用 参考 b站 叩丁狼 Canvas 课程（1）通过 html 标签创建<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过html标签创建</title> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script> // 1. 获取 canvas 画布 const canvas = document.getElementById('canvas') // 2. 获取 context 对象（画笔） const context = canvas.getContext('2d') // 3. 画一个正方形 // fillRect(x, y, width, height) context.fillRect(50, 40, 200, 200) </script> </body> </html>（2）通过 js 创建<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过js创建</title> </head> <body> <script> // 1. 创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2. 获取 context 对象（画笔） const context = canvas.getContext('2d') // 3. （同第一节）画一个正方形 context.fillRect(60, 60, 200, 200) </script> </body> </html>（3）canvas 宽高的设置<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas宽高的设置</title> <!-- <style> canvas { width: 500px; height: 500px } </style> --> </head> <body> <script> // 注意：不建议使用 CSS 样式表设置 canvas 的宽高，样式会出问题 // 1. 创建 canvas 画布 const canvas = document.createElement('canvas') // 设置宽高 canvas.width = 500 canvas.height = 500 document.body.append(canvas) // 2. 获取 context 对象（画笔） const context = canvas.getContext('2d') // 3. （同第一节）画一个正方形 context.fillRect(60, 60, 200, 200) </script> </body> </html>
