如何使用html5的canvas 做一个曲线图----y= cos(x)曲线制作

答案:1 悬赏:70

解决时间 2021-04-21 07:54

提问者网友：晨熙污妖王
2021-04-20 13:58

如何使用html5的canvas 做一个曲线图。请附上代码。急、、

最佳答案

二级知识专家网友：蜜罐小熊
2021-04-20 14:53

<!DOCTYPE html>
<html>
<head>
    <title>Cos演示</title>
    <meta charset='utf-8'>
</head>
<body >
<canvas width='800' height='600' id='canvas' >

</canvas>
<script>
    var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext('2d');
    function drawAxis(){
        ctx.translate(400,300);
        //x 轴
        ctx.beginPath();
        ctx.moveTo(-380,0);
        ctx.lineTo(380,0);
        ctx.lineTo(372,3);
        ctx.lineTo(372,-3);
        ctx.lineTo(380,0);
        ctx.stroke();   //描边
        //y 轴
        ctx.moveTo(0,200);
        ctx.lineTo(0,-200);
        ctx.lineTo(3,-192);
        ctx.lineTo(-3,-192);
        ctx.lineTo(0,-200);
        ctx.stroke();   //描边
        //画坐标
        ctx.save();
        ctx.stroke;
        ctx.moveTo(-Math.PI*100,100);
        ctx.lineTo(-Math.PI*100,-100);
        ctx.lineTo(Math.PI*100,-100);
        ctx.lineTo(Math.PI*100,100);
        ctx.lineTo(-Math.PI*100,100);
        ctx.stroke();   //描边
        ctx.fill;
        ctx.fillText("-π",-Math.PI*100,10);
        ctx.fillText("π",Math.PI*100,10);
        ctx.fillText("-1",5,100);
        ctx.fillText("1",5,-100);
        ctx.restore();

    }
    function drawCos(){
        var x = -Math.PI*100;
        ctx.beginPath();
        ctx.moveTo(x,100);
        for(x = -Math.PI*100;x<Math.PI*100;x++){
            var cx = x/100;
            var cy = Math.cos(cx);
            var y = -cy*100;
            ctx.lineTo(x,y);
        }
        ctx.stroke();   //描边
    }
    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.save();
        ctx.shadowColor='rgba(0,0,0,0.8)';
        ctx.shadowOffsetX=12;
        ctx.shadowOffsetY=12;
        ctx.shadowBlur=15;
        drawAxis();
        drawCos();
        ctx.restore();
    }
    ctx.fill;
    ctx.stroke;
    draw();
</script>
</body>
</html>代码附上，妥妥的~

我要举报

如以上问答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！