首页HTML，Canvas自由绘图，简单的图形，代码

HTML，Canvas自由绘图，简单的图形，代码

时间: 2024-12-28 19:39:31 浏览: 2

HTML是一种标记语言，主要用于创建网页结构，提供内容的呈现。它本身并不支持复杂的图形绘制功能，但是结合JavaScript和HTML5的Canvas API，可以实现丰富的自由绘图。 Canvas是HTML5中的一个标签，它提供了一个二维渲染上下文，允许开发者直接在浏览器上绘制图形、文本、图像等元素。通过JavaScript的`context`对象，你可以设置线条颜色、宽度，填充色，以及执行各种基本的绘图操作，比如线条、矩形、圆形、弧线，甚至是更复杂的路径。以下是一个简单的示例，展示如何在Canvas上画一个红色正方形： ```html <!DOCTYPE html> <html lang="en"> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(10, 10, 180, 180); </script> </body> </html> ``` 在这个例子中，`fillRect()`函数用于在指定位置(x, y)和大小(width, height)内填充红色。

阅读全文