Tutorial/Canvas_Examples

Canvas 是 HTML5 中的绘图元素，它允许我们直接在网页上绘制图形和动画。以下是一些基本的 Canvas 绘图示例。

基本绘制

线条

要绘制线条，我们可以使用 lineTo() 方法。以下是一个简单的示例：

function drawLine() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 200);
    ctx.stroke();
}

矩形

绘制矩形可以使用 rect() 方法：

function drawRect() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.rect(25, 25, 150, 100);
    ctx.stroke();
}

圆形

要绘制圆形，可以使用 arc() 方法：

function drawCircle() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, 2 * Math.PI);
    ctx.stroke();
}

图像处理

Canvas 也允许我们操作图像。以下是如何将图像绘制到画布上的示例：

function drawImage() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();

    img.onload = function() {
        ctx.drawImage(img, 0, 0);
    };

    img.src = '/path/to/image.jpg';
}

查看更多关于 Canvas 的教程。

Golden Retriever