首页在 Canvas 上绘制油画和文字在 painting.html 文件中添加 <canvas> 标签。添加 <script> 标签，并在其中编写 JavaScript 代码。先在画布上绘制矩形框作为画框，再绘制油画。

在 Canvas 上绘制油画和文字在 painting.html 文件中添加 <canvas> 标签。添加 <script> 标签，并在其中编写 JavaScript 代码。先在画布上绘制矩形框作为画框，再绘制油画。

时间: 2024-03-14 16:42:45 浏览: 111

好的，以下是在 Canvas 上绘制油画和文字的代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas Painting</title> </head> <body> <canvas id="myCanvas" width="600" height="400" style="border:1px solid #000000;"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制矩形框 ctx.strokeRect(50, 50, 500, 300); // 绘制油画 ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(150, 200); ctx.lineTo(200, 150); ctx.lineTo(250, 250); ctx.lineTo(300, 200); ctx.lineTo(350, 300); ctx.lineTo(400, 250); ctx.lineTo(450, 350); ctx.lineTo(500, 300); ctx.strokeStyle = "brown"; ctx.lineWidth = 10; ctx.stroke(); // 绘制文字 ctx.fillStyle = "black"; ctx.font = "30px Arial"; ctx.fillText("Canvas Painting Demo", 100, 380); </script> </body> </html> ``` 在这个例子中，我们先获取了 `<canvas>` 标签并获取了它的 2D 上下文对象 `ctx`，然后使用 `strokeRect()` 方法绘制了一个矩形框作为画框。接下来，我们使用 `beginPath()` 方法开始绘制一条曲线，并使用 `moveTo()` 和 `lineTo()` 方法移动画笔位置并绘制曲线，最后使用 `stroke()` 方法将曲线绘制出来。我们还为曲线设置了颜色和线宽。最后，我们使用 `fillText()` 方法在画布上绘制了一段文字，并为文字设置了颜色和字体。您可以将这段代码复制到一个新建的 HTML 文件中，并在浏览器中打开查看效果。

阅读全文