一、创建canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="box-shadow:2px 5px 5px rgba(0,0,0,0.4)">
我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
</canvas>
<!-- 需要注意，canvas 默认样式的宽度和高度 是 300px * 150px. -->
</body>
</html>
如图
image.png
二、修改 Canvas 的画布
<script type="text/javascript">
var canvas_1 = document.getElementById("canvas");
canvas_1.width = "500"; //注意，不要加 px
canvas_1.height = "500";
</script>
image.png
三、获取绘制环境
我们可以通过 var ctx = canvas_1.getContext("2d"); 来去获取到我们的绘制环境。
<script type="text/javascript">
// 获取 canvas 元素对应的 DOM 对象
var canvas_1 = document.getElementById("canvas");
// 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
var ctx = canvas_1.getContext("2d");
// 打印一下，查看是否能够显示具体环境
console.log(ctx);
</script>
image.png
四、绘制的坐标轴
横轴向右是正，纵轴向下是正。
image.png
五 、绘制直线
绘制直线满足的条件
线的起点
线的终点
线的颜色
线的宽度
<script type="text/javascript">
// 获取 canvas 元素对应的 DOM 对象
var canvas_1 = document.getElementById("canvas");
// 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
var ctx = canvas_1.getContext("2d");
// 打印一下，查看是否能够显示具体环境
console.log(ctx);
// 开始绘制
ctx.beginPath();
//设置绘制起点
ctx.moveTo(0,0);
//设置绘制下一个点
ctx.lineTo(700,400);
//结束绘制
ctx.closePath();
//填充 canvas 当前路径绘制边框
ctx.stroke()
</script>
image.png
直线样式
// 直线填充
// 开始绘制
ctx.beginPath();
//设置绘制起点
ctx.moveTo(0, 0);
//设置绘制下一个点
ctx.lineTo(300, 400);
// //设置绘制下一个点
ctx.lineTo(400, 100);
// //设置线的宽度
ctx.lineWidth = 10;
// //结束绘制
ctx.closePath();
// // 设置填充样式
ctx.fillStyle = "green";
// //设置绘制的样式
ctx.strokeStyle = "red";
ctx.fill()
ctx.stroke()
image.png
设置边角的样式及绘制矩形
<script>
// 获取元素
var canvas_1 = document.getElementById("canvas")
console.log(canvas_1);
// 设置宽高
canvas_1.width = "500"; //注意，不要加 px
canvas_1.height = "500";
// // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
var ctx = canvas_1.getContext("2d");
console.log(ctx);
// 设置线条宽度
ctx.lineJoin = "miter"; // bevel斜角 miter尖角 round 圆角
ctx.fillStyle = "pink"
// 填充一个矩形 实心
ctx.fillRect(30, 20, 120, 60);
// / 设置线条宽度
ctx.lineWidth = 20;
// 设置填充颜色
ctx.strokeStyle = 'pink';
// 填充一个矩形 空心
ctx.strokeRect(80, 160, 120, 60);
// 设置线条宽度
ctx.lineJoin = "bevel";
// 设置填充颜色
ctx.strokeStyle = '#f0f';
// 填充一个矩形
ctx.strokeRect(130, 190, 120, 60);
ctx.storke(); //填充 canvas 当前路径绘制边框
</script>
image.png
绘制字符串
<script>
// 获取 canvas 元素对应的 DOM 对象
var canvas_1 = document.getElementById("canvas");
canvas_1.width = "500"; //注意，不要加 px
canvas_1.height = "500";
// 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
var ctx = canvas_1.getContext("2d");
ctx.fillStyle = '#00f';
ctx.font = 'italic 50px 隶书';
ctx.textBaseline = 'top'; // 设置绘制字符串的垂直对齐方式(top、hanging、middle、alphabetic、idecgraphic、bottom 等)
// textAlign 设置绘制字符串的水平对齐方式(start、end、left、right、center等)
//填充字符串
ctx.fillText('人生得意须尽欢', 0, 0);
ctx.strokeStyle = 'f0f';
ctx.font = 'bold 45px 宋体';
// 绘制字符串的边框
ctx.strokeText('莫使金樽空对月', 0, 50, 200);
</script>
image.png
设置阴影
<script>
// 获取 canvas 元素对应的 DOM 对象
var canvas_1 = document.getElementById("canvas");
canvas_1.width = "500"; //注意，不要加 px
canvas_1.height = "500";
// 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
var ctx = canvas_1.getContext("2d");
// 设置阴影的模糊程度
ctx.shadowBlur = 5.6;
// 设置阴影的颜色
ctx.shadowColor = '#222';
// 设置阴影在 X,Y 方向的偏移
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = -6;
ctx.fillStyle = '#00f';
ctx.font = 'italic 50px 隶书';
ctx.textBaseline = 'top'; // 设置绘制字符串的垂直对齐方式(top、hanging、middle、alphabetic、idecgraphic、bottom 等)
// textAlign 设置绘制字符串的水平对齐方式(start、end、left、right、center等)
//填充字符串
ctx.fillText('人生得意须尽欢', 0, 0);
ctx.strokeStyle = 'f0f';
ctx.font = 'bold 45px 宋体';
// 绘制字符串的边框
ctx.strokeText('莫使金樽空对月', 0, 50, 200);
</script>
image.png
