16、HTML5 Canvas与音视频应用全解析

HTML5 Canvas与音视频应用全解析

在现代Web开发中，HTML5的 <canvas> 元素以及 <audio> 和 <video> 标签为开发者提供了强大的功能，能够实现丰富多样的交互效果和多媒体展示。下面将详细介绍这些元素的使用方法和相关示例。

1. <canvas> 元素绘图基础

<canvas> 元素是HTML5中用于绘制图形的强大工具，它可以通过JavaScript动态生成各种图形，包括线条、矩形、圆形和文本等。

1.1 绘制三角形

绘制三角形时，由于没有直接的“绘制形状”方法，需要通过绘制三条线来实现。以下是绘制三角形的代码示例：

function drawTriangle() {
    var canvas = document.querySelector('#triangle');
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = 'rgb(0,255,0)';
    ctx.beginPath();
    ctx.moveTo(25, 125);
    ctx.lineTo(75, 25);
    ctx.lineTo(125, 125);
    ctx.closePath();
    ctx.stroke();
}