canvas绘制坐标系

课程目标:

1.绘制坐标系需要用到什么核心函数?
2.步骤是什么?
3.源代码?

1.绘制坐标系需要用到什么核心函数?

fill() beginPath() moveTo()    lineTo()  stroke(); strokeStyle = "#000"; oCtx.stroke();oCtx.line()

2.步骤是什么?

let oCanvas = document.querySelector("canvas");

第一步:拿到canvas对象

 let oCtx = oCanvas.getContext("2d");

第二步:通过canvas对象里面的方法拿到绘图工具.

let gridSize = 50;

第三步:设置个变量代表单元格的宽高.

 let canvasWidth = oCtx.canvas.width;
    let canvasHeight = oCtx.canvas.height;

第四步:通过绘图工具获取canvas对象里面的宽高。

let row = Math.floor(canvasHeight / gridSize);
    let col = Math.floor(canvasWidth / gridSize);

第五步:问题是如果单元格的宽高与canvas的宽高除不尽怎么办?
向下取余.

// 6.绘制垂直方向的横线
    for(let i = 0; i < row; i++){
        oCtx.beginPath();
        oCtx.moveTo(0, i * gridSize - 0.5);
        oCtx.lineTo(canvasWidth, i * gridSize - 0.5);
        oCtx.strokeStyle = "#ccc";
        oCtx.stroke();
    }
    // 7.绘制水平方向的横线
    for(let i = 0; i < col; i++){
        oCtx.beginPath();
        oCtx.moveTo(i * gridSize - 0.5, 0);
        oCtx.lineTo(i * gridSize - 0.5, canvasHeight);
        oCtx.strokeStyle = "#ccc";
        oCtx.stroke();
    }

第六步:用for循环绘制表格。
问题?怎么绘制?
第一步:每一次的循环都开启一个新的路径。根据xy坐标绘制就行了.(默认canvas左上角开始).
为什么-0.5,因为默认情况下线条的中心点和像素的底部对齐所以会2显示,所以显示非纯黑色问题。所以-0.5,代表0.52=1

第七步(坐标系开始):
坐标系的原点的位置;
在这里插入图片描述

let originX = gridSize;//x坐标50的位置
let originY = canvasHeight - gridSize;//y坐标400-50的位置

第八步:
x y轴终点的位置.

 let endX = canvasWidth - gridSize;//500-50
let endY = gridSize;//50

第九步:绘制x轴.

oCtx.beginPath();
    oCtx.moveTo(originX, originY);//从x:50 y:350的地方开始,
    oCtx.lineTo(endX, originY);//从x:450,y:350的地方结束
    oCtx.strokeStyle = "#000";//连接线的颜色为#000
    oCtx.stroke();//连接.

第十步:绘制y轴。

 // 3.绘制Y轴
    oCtx.beginPath();
    oCtx.moveTo(originX, originY);//从x:50,y:350开始
    oCtx.lineTo(originX, endY);//以x:50,y:50结束
    oCtx.strokeStyle = "#000";//连线的颜色为#000
    oCtx.stroke();//连接起来

第十一步:绘制x轴的箭头

 oCtx.lineTo(endX - 10, originY + 5);//x轴的终点往左移动10px,再往下移动5px
    oCtx.lineTo(endX - 10, originY - 5);//x轴往左移动10px,再往上移动5px.
    oCtx.lineTo(endX, originY);//再连接x轴的终点连接起来.
    oCtx.fill();//填充

第十二步:绘制y轴的箭头

oCtx.lineTo(originX - 5, endY + 10);//y轴的终点往左5px,往下移动10px
    oCtx.lineTo(originX + 5, endY + 10);//y轴的终点往右移动5,再往下移动10px
    oCtx.lineTo(originX, endY);//再连接本来的y轴终点.
    oCtx.fill();//填充

完毕.

3.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            display: block;
            margin: 0 auto;
            background: red;
        }
    </style>
</head>
<body>
<canvas width="500" height="400"></canvas>
<script>
    // 1.拿到canvas
    let oCanvas = document.querySelector("canvas");
    // 2.从canvas中拿到绘图工具
    let oCtx = oCanvas.getContext("2d");
    // 3.定义变量保存小方格的尺寸
    let gridSize = 50;
    // 4.拿到canvas的宽高
    let canvasWidth = oCtx.canvas.width;
    let canvasHeight = oCtx.canvas.height;
    // 5.计算在垂直方向和水平方向可以绘制多少条横线
    let row = Math.floor(canvasHeight / gridSize);
    let col = Math.floor(canvasWidth / gridSize);
    // 6.绘制垂直方向的横线
    for(let i = 0; i < row; i++){
        oCtx.beginPath();
        oCtx.moveTo(0, i * gridSize - 0.5);
        oCtx.lineTo(canvasWidth, i * gridSize - 0.5);
        oCtx.strokeStyle = "#ccc";
        oCtx.stroke();
    }
    // 7.绘制水平方向的横线
    for(let i = 0; i < col; i++){
        oCtx.beginPath();
        oCtx.moveTo(i * gridSize - 0.5, 0);
        oCtx.lineTo(i * gridSize - 0.5, canvasHeight);
        oCtx.strokeStyle = "#ccc";
        oCtx.stroke();
    }

    // 1.计算坐标系原点的位置
    let originX = gridSize;
    let originY = canvasHeight - gridSize;
    // 2.计算X轴终点的位置
    let endX = canvasWidth - gridSize;
    // 3.绘制X轴
    oCtx.beginPath();
    oCtx.moveTo(originX, originY);
    oCtx.lineTo(endX, originY);
    oCtx.strokeStyle = "#000";
    oCtx.stroke();
    // 4.绘制X轴的箭头
    oCtx.lineTo(endX - 10, originY + 5);
    oCtx.lineTo(endX - 10, originY - 5);
    oCtx.lineTo(endX, originY);
    oCtx.fill();

    // 5.计算Y轴终点的位置
    let endY = gridSize;
    // 3.绘制Y轴
    oCtx.beginPath();
    oCtx.moveTo(originX, originY);
    oCtx.lineTo(originX, endY);
    oCtx.strokeStyle = "#000";
    oCtx.stroke();
    // 4.绘制X轴的箭头
    oCtx.lineTo(originX - 5, endY + 10);
    oCtx.lineTo(originX + 5, endY + 10);
    oCtx.lineTo(originX, endY);
    oCtx.fill();
</script>
</body>
</html>

canvas绘制坐标系_第1张图片

你可能感兴趣的:(canvas绘制坐标系)