【H5 Canvas 和 JavaScript 绘制sin曲线】

原创

于 2023-03-19 20:15:45 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文展示了如何利用HTML5 Canvas结合JavaScript来绘制并动态更新sin曲线。通过循环绘制不同位置的小圆点，形成沿sin曲线运动的效果。源代码中详细解释了关键函数如`drawSin`、`setCanvas`、`drawPoint`和`drawOneMoment`的实现，这些函数用于绘制曲线、设置定时更新以及创建动图效果。

随机变换颜色的小圆球,沿着sin曲线运动。
源代码如下:

canvas class=“canvas” id=“canvas” width=“400” height=“400”
style=“border:1px solid #0000FF;”>

function drawSin (){
ctx.moveTo(0, 200);
for (var i=0;i<400;i++){
var y = i/10;
var z = 100*Math.sin(y) +200;
console.log(i);
console.log(z);
ctx.lineTo(i, z);
}
ctx.lineWidth = 2; //线宽
ctx.strokeStyle = ‘red’; //描边颜色
ctx.stroke(); //渲染直线(描边)
}

function setCanvas(){
ctx.clearRect(0, 0, 400, 400);
drawSin();
setInterval(‘drawOneMoment()’, 200);
}

//绘制某一时刻的点
function drawPoint(ctx, text, textcolor) {
var y = _i/10;
var z = 100*Math.sin(y) +200;
ctx.beginPath();
//画小圆点
ctx.moveTo(0, 410);
ctx.arc(_i, z, 8, 0, 2 * Math.PI, false);
var color = Math.floor(Math.random()*16777215);
var style = “#”+color.toString(16);
ctx.fillStyle= style;
ctx.fill();
ctx.closePath();