html5 canvas代码

HTML5的Canvas元素可以用于在Web页面中绘制图形。Canvas提供了一个基本的绘画API，包括绘制路径、文本、图像以及设置样式和颜色。下面是一个简单的HTML5 Canvas代码示例：

canvas id="myCanvas" width="200" height="200">
    /canvas>
    script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
    /script>
    

在该代码中，我们创建了一个 id 为“myCanvas”的 Canvas 元素，并设置了其宽度（width）和高度（height）。接着，我们使用 JavaScript 获取该 Canvas 元素，并通过 getContext() 方法获取一个 2D 上下文对象（即可绘制平面图形的上下文）。

在绘制之前，我们使用 fillStyle 属性设置填充颜色为红色。然后，我们通过 fillRect() 方法在画布上绘制一个填充矩形，该方法接受四个参数，分别代表矩形的左上角 x 坐标、y 坐标、宽度和高度。在该示例中，我们画了一个左上角坐标为 (0,0) 并且宽度和高度分别为 150 和 75 的矩形。

上述示例只是Canvas API的一小部分，你可以使用更多的API和属性，比如设置线条颜色、宽度、绘制图形路径等等。如果你想要学习更多关于Canvas的知识，请查看MDN上的相关文档。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！