HTML中Canvas关键知识点总结

作者：System 时间：2024年08月15日分类：所有,html 字数：1212

这篇文章距离上次修改已过189天，其中的内容可能已经有所变动。




<!DOCTYPE html>
<html>
<head>
    <title>Canvas 关键概念总结</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
 
        // 填充矩形
        ctx.fillStyle = '#FF0000'; // 设置填充颜色
        ctx.fillRect(20, 20, 150, 75); // 填充矩形
 
        // 绘制线条
        ctx.beginPath(); // 起始一条新路径或重置当前路径
        ctx.moveTo(20, 20); // 移动到指定的坐标
        ctx.lineTo(190, 20); // 添加一个新的点，然后在画布中创建从当前点到指定点的线
        ctx.strokeStyle = '#0000FF'; // 设置线条颜色
        ctx.stroke(); // 绘制路径的边界
 
        // 绘制文本
        ctx.font = '20px Arial';
        ctx.fillStyle = '#00FF00';
        ctx.fillText('Hello, World!', 20, 50);
 
        // 使用globalCompositeOperation属性来控制合成效果
        ctx.globalCompositeOperation = 'destination-over';
 
        // 清除画布
        ctx.clearRect(40, 40, 100, 30);
    </script>
</body>
</html>

这段代码展示了如何在HTML中使用Canvas元素，并通过JavaScript的CanvasRenderingContext2D接口进行绘图。代码中包含了填充矩形、绘制线条、绘制文本和清除画布的基本操作，以及globalCompositeOperation属性的使用，旨在帮助开发者理解Canvas的基本概念。

HTML中Canvas关键知识点总结

评论已关闭

推荐阅读