canvas绘制正弦图像代码
时间: 2024-12-22 07:26:38 浏览: 7
在HTML5的Canvas上绘制正弦图像,你需要利用JavaScript的绘图API。下面是一个简单的例子,它会画出一条基本的正弦曲线:
```html
<!DOCTYPE html>
<html>
<head>
<title>正弦曲线绘制</title>
<style>
#canvas {
border: 1px solid black;
display: block;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
function drawSinWave() {
var x, y, gradient;
for (x = 0; x <= canvas.width; x++) {
y = Math.sin(x * Math.PI / canvas.width); // 计算每个点的y值,基于x的位置和正弦函数
if (!gradient) { // 创建渐变对象
gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'red'); // 起始颜色
gradient.addColorStop(1, 'blue'); // 结束颜色
}
ctx.beginPath(); // 开始路径
ctx.moveTo(x, 0); // 从原点开始
ctx.lineTo(x, y); // 连接到当前点
ctx.fillStyle = gradient; // 设置填充色
ctx.fill(); // 填充路径
}
}
drawSinWave(); // 首次绘制
</script>
</body>
</html>
```
这个代码首先获取canvas元素并设置绘图上下文,然后在一个循环里计算每个像素点的y坐标(正弦值),并用线性渐变效果给曲线添加颜色。当鼠标移动时,你可以结合鼠标的x坐标实时更新正弦图像。
阅读全文