HTML <canvas>画布元素用于通过脚本（通常是JavaScript）动态绘制图形。
<canvas> 画布元素只是图形的容器。您必须使用脚本来实际绘制图形。
<canvas>有几种用于绘制路径、框、圆、文本和添加图像的方法。
绘制canvas
<!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></canvas></title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#666fff";
ctx.fillRect(10, 10, 150, 75);
</script>
</html>
1.找到 Canvas 画布元素
2.使用画布 getContext 内置对象绘制 它具有属性的绘图和方法
3.最后在画布上面画图 fillStyle
fillStyle 属性可以是CSS颜色、渐变色或图案。默认填充样式为黑色。
fillRect(x,y,width,height) 方法在画布上绘制一个用填充样式填充的矩形:
canvas 画布坐标
HTML 画布是一个二维网格。
画布左上角坐标是 (0,0)
绘制一条直线
要在画布上绘制直线，请使用以下方法: moveTo(x,y) - 定义直线的起点 lineTo(x,y) - 定义直线的终点 画真正的直线，必须使用 "ink" 方法之一，如 stroke()。<!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></canvas></title> </head> <body> <canvas id="myCanvas"></canvas> </body> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.moveTo(0, 0); ctx.fillStyle = "#666fff"; ctx.fillRect(0, 0, 200, 100); ctx.lineTo(200, 100); ctx.stroke(); </script> </html>
绘制一个园⚪
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath()
ctx.arc(95, 50, 40, 0, 2 * Math.PI)
ctx.stroke();
beginPath() - 开始一条路径
arc(x,y,r,startangle,endangle) - 创建圆弧/曲线。使用 arc() 创建圆: 将开始角度设置为 0 ，将结束角度设置为 2*Math.PI。 x 和 y 参数定义圆心的 x 和 y 坐标。r 参数定义圆的半径
用 arc() 方法定义一个圆。然后使用 stroke() 方法实际绘制圆
canvas 渐变
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
渐变可以用来填充矩形、圆、线、文本等。画布上的形状不限于纯色。
有两种不同类型的渐变:createLinearGradient(x,y,x1,y1) - 创建线性渐变createRadialGradient(x,y,r,x1,y1,r1) - 创建径向/圆形渐变
一旦我们有了渐变对象，我们必须添加两个或更多的颜色停止。addColorStop() 方法指定颜色停止点及其沿渐变的位置。渐变位置可以是0到1之间的任意位置。
要使用渐变，请将 fillStyle 或 strokeStyle 属性设置为渐变，然后绘制形状（矩形、文本或直线）。
圆形渐变。用渐变填充矩形
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
canvas 画布文本
要在画布上绘制文本，最重要的属性和方法是: font - 定义文本的字体属性 fillText(text,x,y) - 在画布上绘制"填充"文本 strokeText(text,x,y) - 在画布上绘制文本（无填充）
// 绘制文本
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
//strokeText() 不填充格式文本
// 添加颜色和文本居中
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
canvas 图像
<!DOCTYPE html>
<html>
<body>
<p>要使用的图片：</p>
<img id="scream" width="220" height="277"
src="..." alt="图像" >
<p>画布:</p>
<canvas id="myCanvas" width="240" height="297"
style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
</body>
</html>
标签：Canvas,渐变,ctx,canvas,画布,HTML,var,绘制 From： https://www.cnblogs.com/tcyweb/p/17741650.html