HTML中Canvas关键知识点总结
<!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的基本概念。
评论已关闭