第一步创建上下文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
let canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
console.log('canvas',ctx)
</script>
</body>
</html>
第二步使用
fillRect()方法
ctx.fillRect(10,10,50,50)
strokeRect()
ctx.strokeRect(20,20,60,60)
画圆
ctx.beginPath()
ctx.arc(50,50,30,2*Math.PI,false)
ctx.fillStyle = 'blue'
ctx.lineWidth = 5
ctx.storkeStyle = 'black'
ctx.closePath()
ctx.fill()
ctx.stroke()
画一条线
ctx.beginPath()
ctx.moveTo(30,40)
ctx.lineTo(50,80)
ctx.closePath()
ctx.fill()
ctx.stroke()
写字
ctx.font = '16px serif';
ctx.fillStyle = 'black'
ctx.fillText('你好', 50,50)
ctx.strokeText('阿松大',80,80,50)
画一个笑脸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
let canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
console.log('canvas',ctx)
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // 口 (顺时针)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
ctx.stroke();
</script>
</body>
</html>
三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
let canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
console.log('canvas',ctx)
// 填充三角形
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(105, 25);
ctx.lineTo(25, 105);
ctx.fill();
// 描边三角形
ctx.beginPath();
ctx.moveTo(125, 125);
ctx.lineTo(125, 45);
ctx.lineTo(45, 125);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
let canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
console.log('canvas',ctx)
let x = 0;
setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 50, 50, 50);
x++;
}, 10);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
let canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 50, 50, 50);
x++;
requestAnimationFrame(animate);
}
animate()
</script>
</body>
</html>
画图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- <script src="./index.js"></script> -->
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// 调用函数绘制图形
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.fillStyle = "blue";
// 设置开关
var flag = false;
// 鼠标按下绘图
canvas.onmousedown = (e) => {
flag = true;
ctx.beginPath();
ctx.moveTo(e.clientX, e.clientY);
};
// 鼠标抬起停止绘图
canvas.onmouseup = () => {
flag = false;
};
// 鼠标移入绘图
canvas.onmousemove = (e) => {
if (flag) {
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
};
</script>
</body>
</html>
时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- <script src="./index.js"></script> -->
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// 调用函数绘制图形
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 还原坐标系
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
// 将坐标系移动到中心点
ctx.translate(centerX, centerY);
// 绘制文本
const radius = canvas.width / 2 - 5; // 时钟的半径
ctx.font = "bold 14px Arial"; // 设置文本样式
ctx.textAlign = "center"; // 设置文本对齐方式
ctx.textBaseline = "middle"; // 设置文本基线为中间
// 绘制钟表轮廓
ctx.beginPath(); //开启路径
ctx.arc(0, 0, radius, 0, 2 * Math.PI); // 绘制圆形
ctx.stroke(); // 画线填充
// 绘制钟表数字
for (let i = 1; i <= 12; i++) {
const angle = i * Math.PI / 6; // 分成12份
ctx.rotate(angle);
ctx.translate(0, -radius + 15); // 将原点向上平移
ctx.rotate(-angle);
ctx.fillText(i.toString(), 0, 0);
ctx.rotate(angle);
ctx.translate(0, radius - 15); // 将原点向下平移
ctx.rotate(-angle)
}
function drawClock() {
const now = new Date();
const radius = canvas.width / 2 - 5;
ctx.clearRect(-centerX, -centerY, canvas.width, canvas.height); // 每次绘制前清空整个画布
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
// 绘制钟表数字
ctx.font = "bold 14px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
for (let i = 1; i <= 12; i++) {
const angle = i * Math.PI / 6;
ctx.rotate(angle);
ctx.translate(0, -radius + 15);
ctx.rotate(-angle);
ctx.fillText(i.toString(), 0, 0);
ctx.rotate(angle);
ctx.translate(0, radius - 15);
ctx.rotate(-angle)
}
// 绘制时针
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();
const hourAngle = (hour % 12 + minute / 60 + second / 3600) * Math.PI / 6;
const hourLength = 0.6 * radius;
const hourX = Math.sin(hourAngle) * hourLength;
const hourY = -Math.cos(hourAngle) * hourLength;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(hourX, hourY);
ctx.lineWidth = 4;
ctx.lineCap = "round";
ctx.stroke();
// 绘制分针
const minuteAngle = (minute + second / 60) * Math.PI / 30;
const minuteLength = 0.8 * radius;
const minuteX = Math.sin(minuteAngle) * minuteLength;
const minuteY = -Math.cos(minuteAngle) * minuteLength;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(minuteX, minuteY);
ctx.lineWidth = 2;
ctx.stroke();
// 绘制秒针
const secondAngle = second * Math.PI / 30;
const secondLength = 0.9 * radius;
const secondX = Math.sin(secondAngle) * secondLength;
const secondY = -Math.cos(secondAngle) * secondLength;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(secondX, secondY);
ctx.lineWidth = 1;
ctx.strokeStyle = "red"; // 设置颜色
ctx.stroke();
// 绘制中央圆点
ctx.beginPath();
ctx.arc(0, 0, 5, 0, 2 * Math.PI);
ctx.fillStyle = "#333"; // 设置颜色
ctx.fill();
// 循环绘制
setTimeout(drawClock, 1000);
}
drawClock();
// 循环绘制
setTimeout(drawClock, 1000);
</script>
</body>
</html>
工作之余,玩一下canvas,哈哈