前端canvas的基础使用

一、介绍

前端中的 Canvas 是一种用于在网页上绘制图形的 HTML 元素。它提供了一个可以通过 JavaScript 进行绘制的 2D 绘图环境。使用 Canvas，您可以绘制图形，包括线条、矩形、圆形、文本和图像。Canvas 为开发人员提供了灵活自由的绘图能力，可以用于创建交互式游戏、数据可视化、图表和其他富媒体应用程序。

二、基础使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01_初识canvas</title>
</head>
<style>#canvas {background-color: #c1c1c1;margin: 20px;}
</style><body><canvas width="800" height="800" id="canvas"></canvas>
</body>
<script>//获取画板const canvas = document.querySelector('#canvas')//获取画笔const ctx = canvas.getContext("2d");//绘制线段ctx.beginPath(); //新建路径ctx.moveTo(0, 10);ctx.lineTo(200, 10);ctx.lineWidth = 10;ctx.strokeStyle = 'red'ctx.stroke()  //执行绘制//绘制线段ctx.beginPath(); //新建路径ctx.moveTo(0, 20);ctx.lineTo(200, 20);ctx.lineWidth = 10;ctx.strokeStyle = 'blue'ctx.stroke()  //执行绘制//绘制一个三角形ctx.beginPath(); //新建路径ctx.moveTo(0, 70);ctx.lineTo(200, 70);ctx.lineTo(90, 100)// ctx.lineTo(0, 70) //结束位置为开始位置，让图形闭合ctx.closePath(); //自动闭合apictx.lineWidth = 1;ctx.strokeStyle = 'blue'//设置填充颜色，并填充图形ctx.fillStyle = "green";ctx.fill()ctx.stroke()  //执行绘制//绘制矩形 rect() 需要配合 stroke() 一起使用ctx.beginPath();ctx.rect(0, 220, 200, 100);ctx.strokeStyle = 'red'//设置填充颜色，并填充图形ctx.fillStyle = "green";ctx.fill()ctx.stroke()//绘制矩形 strokeRect() ctx.beginPath();ctx.strokeRect(0, 400, 200, 100);ctx.strokeStyle = 'red'//绘制并填充矩形 fillRect()ctx.beginPath();ctx.strokeStyle = 'red'ctx.fillRect(0, 600, 200, 100);</script></html>