【H5 Canvas 和 JavaScript 绘制sin曲线】

随机变换颜色的小圆球,沿着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