zoukankan      html  css  js  c++  java
  • canvas曲线的绘制

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            canvas {
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
    <canvas width="600" height="400"></canvas>
    <script>
        var myCanvas = document.querySelector('canvas');
        var ctx = myCanvas.getContext('2d');
        /*1.体验曲线的绘制*/
        /*2.线是由点构成的*/
        /*3.曲线可以由数学公式得来*/
        /*公式:y = x/2 */
        /*公式:y = (x + 2) ^2  */
        /*公式:y = sin(x) */
        for(var i = 1 ; i < 600 ; i ++){
            var x = i;
            //var y = x/2;
            //var y = Math.pow(x/10-30,2);
            var y = 50*Math.sin(x/10) + 100;
            ctx.lineTo(x,y);
        }
        ctx.stroke();
    </script>
    </body>
    </html>

    运行结果如下:

    别废话,拿你代码给我看。
  • 相关阅读:
    alpha冲刺9
    alpha冲刺8
    alpha冲刺7
    alpha冲刺6
    团队作业——随堂小测(同学录)
    alpha冲刺5
    alpha冲刺4
    alpha冲刺3
    设计模式——桥接模式
    Java基础——关键字
  • 原文地址:https://www.cnblogs.com/lvxueyang/p/13707450.html
Copyright © 2011-2022 走看看