canvas----绘制坐标轴

最新推荐文章于 2024-08-10 09:38:57 发布

scwMason

最新推荐文章于 2024-08-10 09:38:57 发布

阅读量719

点赞数

分类专栏： HTML/CSS/JS

本文链接：https://blog.csdn.net/scwMason/article/details/83037503

版权

HTML/CSS/JS 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<body>
    <canvas width="600" height="400" style="border-color: #eee"></canvas>
</body>
<script>
    /*
    默认的线条宽度1px
    默认的颜色是黑色
    产生的原因是
    */
    //获取元素
    var myCanvas=document.querySelector('canvas');
    //获取上下文
    var ctx=myCanvas.getContext('2d');
    var grid=10;
    var canvasHeight=ctx.canvas.height;//计算canvas画布的高度
    var canvasWidth=ctx.canvas.width;//获取画布的宽度
    var xLineNumber=Math.floor(canvasWidth/grid);//计算需要几条横线
    var yLineNumber=Math.floor(canvasHeight/grid);//计算需要几条竖线
    ctx.strokeStyle="#eee";
    for(var i=0;i<xLineNumber;i++){//循环来画线
        ctx.beginPath();
        ctx.moveTo(i*grid,0);
        ctx.lineTo(i*grid,canvasHeight);
        ctx.stroke();
    }
    for(var i=0;i<yLineNumber;i++){
        ctx.beginPath();
        ctx.moveTo(0,i*grid);
        ctx.lineTo(canvasWidth,i*grid);
        ctx.stroke();
    }
    //绘制坐标轴

    //1.绘制Y轴
    var spance=20;
    var arrowSize=10;
    ctx.beginPath();
    ctx.moveTo(spance,spance);
    ctx.lineTo(spance,canvasHeight-spance);
    ctx.strokeStyle="black";
    ctx.stroke();
    //2.绘制X轴
    ctx.beginPath();
    ctx.moveTo(spance,canvasHeight-spance);
    ctx.lineTo(canvasWidth-spance,canvasHeight-spance);
    ctx.stroke();
    //3.绘制X轴的箭头
    ctx.moveTo(canvasWidth-spance,canvasHeight-spance-5);
    ctx.lineTo(canvasWidth-spance,canvasHeight-spance+5);
    ctx.lineTo(canvasWidth-spance+10,canvasHeight-spance);
    ctx.closePath();
    ctx.fill();
    //绘制Y轴箭头
    ctx.moveTo(spance-5,spance);
    ctx.lineTo(spance+5,spance);
    ctx.lineTo(spance,spance-10);
    ctx.closePath();
    ctx.fill();
</script>