Canvas
.<canvas>标签：画布标签，本身不具备绘图能力，可以通过脚本(JS)来实现
width:设置画布宽度，默认为300px
height:设置画布高度，默认为150px
Canvas API：提供通过JavaScript在<canvas>上绘图的功能 – 动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面
Canvas API主要实现2D效果，3D需要由WebGL API实现
二、基本图形绘制
1.canvasObj.getContext("2d")：返回一个用来在画布上绘图的方法和属性的对象
2.ctx.beginPath()：开始/重新绘制路径
3.ctx.closePath()：结束绘制路径
4.ctx.moveTo(x,y)：设置路径的起点
5.ctx.lineTo(x,y)：设置路径的另一个点
6.ctx.stroke()：绘制路径(空心，描边)
7.ctx.fill()：填充路径(实心)
8.ctx.arc()：绘制圆形/圆弧路径
9.ctx.rect()：绘制矩形路径
10.ctx.strokeRect()：绘制空心矩形
11.ctx.fillRect()：绘制实心矩形
12.ctx.strokeStyle：设置stroke()调用时的相关属性(线条的颜色,渐变)
13.ctx.lineWidth：设置线条粗细(px)
14.ctx.fillStyle：设置fill时的相关属性(填充的颜色，渐变色)
15.设置渐变色
//创建渐变对象
var gradient = ctx.createLinearGradient(渐变开始的x坐标,渐变开始的y坐标,渐变结束的x坐标,渐变结束的y坐标);
gradient.addColorStop(0,color); //渐变开始的颜色
[gradient.addColorStop([0~1],color);]//添加中间的渐变颜色及位置
gradient.addColorStop(1,color); //渐变结束的颜色
16.ctx.strokeText()：绘制空心文字
17.ctx.fillText()：绘制实心文字
18.ctx.font：设置文字相关属性
19.ctx.drawImage()：绘制图像
20.ctx.scale()：缩放画布
21.ctx.rotate()：旋转画布
22.ctx.translate()：平移画布
注意：缩放、旋转、平移实际是改变原点的位置，只对变换之后的绘制有影响；画布显示区域为未变换之前的位置不变
23.ctx.clearRect()：清除矩形区域内的像素(清空画布)
24.ctx.save()：保存绘图状态 – 不能保存绘制的图形
25.ctx.restore()：返回保存的绘图状态 – restore()和save()对应，restore()只能小于等于save()次数
下面是一段代码样例演示，可以直接复制粘贴看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas</title>
</head>
<body>
<canvas width="300" height="300"></canvas>
</body>
</html>
<script>
var canvas = document.querySelector("canvas")//画布必须设置
var ctx = canvas.getContext("2d");//画布必须设置
var arr = 300;
var i = 1;
var arrstyle = "#0416FF,#2791FB,#5ACEFB,#4E966B,#9CBF16"
arrstyle = arrstyle.split(",")//变为数组
for (var i = 1; i < arr; i++) {//纵向循环
// console.log(i)//1--299
for (var j = 1; j < arr; j++) {//横向循环
// console.log(j)//1--299
var s = Math.round(Math.random() * 5);//随机数
ctx.beginPath();//开始绘制
ctx.strokeStyle = arrstyle[s];//填充颜色
ctx.moveTo(j, i);//绘制路径
ctx.lineTo(j + 1, i);//结束坐标
ctx.stroke();//填充描边
ctx.closePath();//结束绘制
}
}
ctx.clearRect(50, 50, 200, 200);//清除画布（x,y,长，宽）
ctx.fillStyle = "red";//颜色
ctx.fillText("字和他的坐标60,60", 60, 60);
</script>
![[附源码]Python计算机毕业设计Django颐养天年辅助平台](https://img-blog.csdnimg.cn/d57f463eb46c4e20860358245f566a33.png)
