初探JavaScript与canvas_js canvas配置-CSDN博客

本文链接：https://blog.csdn.net/Q_w7742/article/details/141824941

首先在VS code中安装：canvas-snippets、Live Server、open in browser。

创建一个文件夹：JS_Project，在JS_Project下创建一个hw1.js和一个hw1index.html

输入html:5

自动创建一个框架：

我们修改<head>部分，创建一个canvas：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <style>
        canvas {
            border: 2px solid #793e3e;
            /* 给画布添加一个边框 */
        }
    </style>
</head>

接下来我们来详细编辑这个canvas。

首先给这个canvas赋予一个ID，我们称为myCanvas，设置宽度700，高度400。

<!-- 给canvas元素添加id属性 -->
    <canvas id="myCanvas" width="700" height="400"></canvas>

我们在之前创建的hw1.js中来具体编辑这个canvas，首先建立html文件和js文件的关联：

<!-- 引入外部JavaScript文件 -->
    <script src="js/hw1.js"></script>

因此我们的hw1index.html文件的最终代码为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <style>
        canvas {
            border: 2px solid #793e3e;
            /* 给画布添加一个边框 */
        }
    </style>
</head>

<body>
    <!-- 给canvas元素添加id属性 -->
    <canvas id="myCanvas" width="700" height="400"></canvas>
    <!-- 引入外部JavaScript文件 -->
    <script src="js/hw1.js"></script>
    
</body>

</html>

首先获取到这个Canvas：

let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

我们希望在这个canvas上显示文字，设计drawText函数：

function drawText(fontSize, text,x,y,textColor) {
    // 设置字体大小
    context.font = fontSize + 'px sans-serif';
    // 设置文本的水平对齐方式
    context.textAlign = 'center';
    // 设置文本的垂直对齐方式
    context.textBaseline = 'middle';
    // 定义文本的最大宽度，这里假设为画布的宽度
    let maxWidth = canvas.width;
    context.fillStyle = textColor;

    // 输出文本到画布
    context.fillText(text,x , y, maxWidth);
}

同时在这个canvas上创建网格，设计drawLine函数：

function drawLine(lineWidth,size,xStyle,yStyle){
    // 设置网格线的颜色和宽度
    context.lineWidth = lineWidth;

    // 网格的大小
    let gridSize = size; // 每个格子的像素大小
    for (let x = 0; x <= canvas.width; x += gridSize) {
        context.beginPath();
        context.moveTo(x, 0);
        context.lineTo(x, canvas.height);
        context.strokeStyle=xStyle
        context.stroke();
    }
    for (let y = 0; y <= canvas.height; y += gridSize) {
        context.beginPath();
        context.moveTo(0, y);
        context.lineTo(canvas.width, y);
        context.strokeStyle=yStyle
        context.stroke();
    }
}

我们通过循环的方式划线。

最终完整的hw1.js文件代码如下：

let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

function drawText(fontSize, text,x,y,textColor) {
    // 设置字体大小
    context.font = fontSize + 'px sans-serif';
    // 设置文本的水平对齐方式
    context.textAlign = 'center';
    // 设置文本的垂直对齐方式
    context.textBaseline = 'middle';
    // 定义文本的最大宽度，这里假设为画布的宽度
    let maxWidth = canvas.width;
    context.fillStyle = textColor;

    // 输出文本到画布
    context.fillText(text,x , y, maxWidth);
}

function drawLine(lineWidth,size,xStyle,yStyle){
    // 设置网格线的颜色和宽度
    context.lineWidth = lineWidth;

    // 网格的大小
    let gridSize = size; // 每个格子的像素大小
    for (let x = 0; x <= canvas.width; x += gridSize) {
        context.beginPath();
        context.moveTo(x, 0);
        context.lineTo(x, canvas.height);
        context.strokeStyle=xStyle
        context.stroke();
    }
    for (let y = 0; y <= canvas.height; y += gridSize) {
        context.beginPath();
        context.moveTo(0, y);
        context.lineTo(canvas.width, y);
        context.strokeStyle=yStyle
        context.stroke();
    }
}

// 初始化函数

function init()
{
    drawText(64, "Hello, world!",canvas.width / 2,canvas.height / 2,"red");
    drawText(32, "My first canvas!",canvas.width*2 / 3,canvas.height*2 / 3,"black");
    drawLine(1,25,"grown","red")
}

init();

两个文件全部保存右键选择：