【HTML5】 canvas 绘制图形

一、基本用法

• canvas 标签：可用于在网页上绘制图形（使用 JavaScript 在网页上绘制图像）
• 画布是一个矩形区域，通过控制其每一像素绘制路径、矩形、圆形、字符以及添加图像。
• 创建一个canvas：width 和 height 是必备属性，id 是为了在 js 中获取改元素。

<canvas id="myCanvas" width="200" height="100"></canvas>

• 在 js 中绘制 canvas

<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
// 绘制矩形（前2个参数为在canvas里面的矩形左上角起点坐标，第3个参数是宽，第4个参数是高）
cxt.fillRect(0,0,150,75);
// 填充颜色
cxt.fillStyle="#FF0000";
</script>

二、用法详见

2.0、方法属性

• context 对象属性

• context 对象方法

2.1、绘制线条

• 线条方法

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
// 线条起点坐标
cxt.moveTo(10,10);
// 折点坐标
cxt.lineTo(150,50);
// 折点坐标
cxt.lineTo(10,50);
// 绘制当前或已经存在的路径的方法
cxt.stroke();
</script>

• 专有属性

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.lineCap = "round";
ctx.stroke();

2.2、绘制矩形

• fillRect() 方法：向路径添加一个填充的矩形 context.fillRect(x, y, width, height)
• strokeRect() 方法：向路径添加一个无填充矩形 context.fillRect(x, y, width, height)
• rect() 方法：向路径添加一个矩形 context.rect(x, y, width, height)

1. strokeRect(30, 30, 50, 50) 
等价于：
	ctx.rect(30, 30, 50, 50);
	ctx.stroke();
2. fillRect(30, 30, 50, 50) 
等价于：
	ctx.rect(30, 30, 50, 50);
	ctx.fill();

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 红色矩形
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.fillStyle = "yellow"	// 在 strokeRect 中不生效
ctx.strokeRect(5, 5, 290, 140);

// 绿色矩形
ctx.beginPath();
ctx.lineWidth = "4";		// 在 fillRect 中不生效
ctx.strokeStyle = "green";	// 在 fillRect 中不生效
ctx.fillStyle = "yellow"
ctx.fillRect(30, 30, 50, 50);

2.3、绘制圆形

• arc() 方法：向路径添加一个圆形 context.arc(x,y,r,start,end)

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
// 填充颜色
cxt.fillStyle="#FF0000";
// 创建一个新的路径
cxt.beginPath();
// 绘制圆弧路径的方法（圆心的x轴坐标，圆心的y轴坐标，圆弧的半径，圆弧的起始点，圆弧的终点，true逆时针绘制圆弧false顺时针绘制）
cxt.arc(70,18,15,0,Math.PI*2,true);
// 返回到当前路径起始点的方法
cxt.closePath();
// 填充当前或已存在的路径的方法
cxt.fill();
</script>

2.4、绘制文本

• fillText(text,x,y)：在画布上绘制“填充的”文本

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

• strokeText(text,x,y)：在画布上绘制文本（无填充）

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

• 专有属性：

• font 属性：使用的语法与 CSS font 属性相同。

• textAlign 属性
  

• textBaseline 属性
  

2.5、填充图像

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
var img = document.getElementById("scream");
// 放置图片 （图片，image的左上角在目标画布上X轴坐标，image的左上角在目标画布上Y轴坐标）
ctx.drawImage(img, 10, 10)
</script>