首页chcem nticu v canvase rozne farby

chcem nticu v canvase rozne farby

时间: 2024-09-10 17:22:15 浏览: 36

在HTML5的canvas元素中，如果你想为绘制的内容添加不同颜色，你可以使用`fillStyle`和`strokeStyle`属性来改变填充色和描边色。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="cs"> <head> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 绘制矩形并更改颜色 function drawColorfulRectangle(x, y, width, height, color) { ctx.fillStyle = color; // 填充颜色 ctx.fillRect(x, y, width, height); // 填充矩形 ctx.strokeStyle = 'black'; // 描边颜色 ctx.strokeRect(x, y, width, height); // 描边矩形 } // 示例：绘制不同颜色的矩形 drawColorfulRectangle(50, 50, 200, 100, 'red'); // 红色 drawColorfulRectangle(200, 75, 150, 150, 'blue'); // 蓝色 drawColorfulRectangle(350, 125, 100, 75, 'green'); // 绿色 </script> </body> </html> ``` 在这个例子中，我们首先获取了canvas元素和其2D渲染上下文（ctx）。然后定义了一个名为`drawColorfulRectangle`的函数，接受位置、大小和颜色参数。该函数会根据传入的颜色值改变填充样式和描边样式，从而创建出不同颜色的矩形。要了解更多关于如何在canvas上动态或按需更改颜色，你可以查阅相关的API文档或在线教程，如MDN Web Docs上的Canvas API指南：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage_of_the_canvas_element。

阅读全文