利用 HTML Canvas 实现图像的分屏镜像

前端

2023-12-08 07:45:55

利用 HTML Canvas 实现图像的分屏镜像

众所周知，HTML Canvas 是一种常用的HTML元素，可以用来创建2D图形和图像。本文将介绍如何通过JavaScript，使用HTML Canvas创建8分镜，让随手画出来的东西有了对称也很有特色。

准备工作

在开始之前，我们需要准备一些东西：

一个HTML文件
一个JavaScript文件
一个Canvas元素
一些JavaScript代码

HTML文件

HTML文件非常简单，只需包含以下内容：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>

  <script src="script.js"></script>
</body>
</html>

JavaScript文件

JavaScript文件包含了我们实现分屏镜像的代码。代码如下：

// 获取Canvas元素
var canvas = document.getElementById('myCanvas');

// 获取Canvas的上下文
var ctx = canvas.getContext('2d');

// 设置画布的背景颜色
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 设置画笔的颜色
ctx.strokeStyle = 'black';

// 设置画笔的宽度
ctx.lineWidth = 5;

// 绘制一条线
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.stroke();

// 翻转画布
ctx.scale(-1, 1);

// 再次绘制一条线
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.stroke();