首先在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();
两个文件全部保存右键选择:
即可得到下面的Web展示: