- HTML5
<canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas>标签只是图形容器，您必须使用脚本来绘制图形。
- 创建一个画布（Canvas）
- 一个画布在网页中是一个矩形框，通过
<canvas>元素来绘制. - 注意: 默认情况下
<canvas>元素没有边框和内容。
<canvas>简单实例如下:<canvas id="myCanvas" width="200" height="100"></canvas>注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小. 提示:你可以在HTML页面中使用多个<canvas>元素. 使用 style 属性来添加边框:
实例
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
Canvas 坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标 lineTo(x,y) 定义线条结束坐标
// 定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
// 使用 arc() 方法 绘制一个圆:
// 在canvas中绘制圆形, 我们将使用以下方法:
// arc(x,y,r,start,stop)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Canvas - 文本
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体 fillText(text,x,y) - 在 canvas 上绘制实心的文本 strokeText(text,x,y) - 在 canvas 上绘制空心的文本
// 使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
// 使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
canvas demo
<!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>
<style>
.container {
width: 600px;
height: 1400px;
background: url('./31.png') no-repeat;
background-size: cover;
}
.caption {
padding: 0.5em 1em;
position: absolute;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(4px);
background-color: rgba(255, 255, 255, 0.5);
}
</style>
<body>
<!--浏览器兼容性检测，需要IE9.0+-->
<canvas id="myCanvas" class="myCanvas" style="border: 1px solid #ccc;">
Sorry，您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</body>
<script>
/*
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
*/
var canvas = document.querySelector('#myCanvas'); //获得画布
//whb: width 和 height 属性值必须是 px，否则忽略处理（默认 300*150 像素）
canvas.width = 600; //设置画布的宽 （此处必须直接定义，不允许用css 或 style.width 进行控制）
canvas.height = 300; //设置画布的高
var ctx = canvas.getContext('2d'); //获得ctx上下文对象（ctx具备各种图形API方法）
//画红色水平线段
ctx.moveTo(200, 280); //定义线段起点
ctx.lineTo(400, 280); //定义线段终点（因为X轴坐标不一样，Y轴一样，所以是水平线段）
ctx.strokeStyle = "#FF0000";//定义画笔颜色
ctx.stroke(); //给线段路径描边（否则不可见）
ctx.closePath(); //闭合路径
//画绿色边框矩形
ctx.strokeStyle = "#00FF00";//定义画笔颜色
ctx.strokeRect(50, 50, 100, 50);
ctx.closePath(); //闭合路径
//画蓝色实心框矩形
ctx.fillStyle = "#0000FF";//定义画笔颜色
ctx.fillRect(200, 50, 100, 50);
ctx.closePath(); //闭合路径
//画渐变矩形
// 先创建“线性”渐变
var grd = ctx.createLinearGradient(300, 50, 500, 50); //createRadialGradient 是径向渐变
grd.addColorStop(0, "white");
grd.addColorStop(1, "red");
// 后填充渐变
ctx.fillStyle = grd;
ctx.fillRect(350, 50, 100, 50);
//画红色圆形
ctx.fillStyle = "#FF0000";
ctx.arc(550, 75, 27, 0, 2 * Math.PI); //四个参数分别为：x,y,r半径，开始角度（3点钟方向为0度角），结束角度（2π表示360度）（即画一个整圆）
ctx.fill();
//画实心文字
ctx.font = "30px Arial";
ctx.fillText("Hello Html5 Canvas", 180, 250); //strokeText 是空心文字
</script>
</html>