在csdn逛的时候发现使用canvas做的游戏,然后了解了几天发现很有趣,现在想慢慢抽空学学,先从基础开始吧!
参考网址
准备画布
<body>
<canvas id="canvas" width="1000" height="800"></canvas>
</body>
首先从线开始,首先要获取到画布
let cav = document.getElementById("canvas"); // 获取canvas元素
let ctx = cav.getContext("2d"); //如需在画布上绘图,您需要创建 2D 上下文对象
现在就可以给画布上绘制
lineCap属性--设置或返回线的端盖样式,我理解为线的两端类型
注意下图代码注释哦!
let x1 = 20,
x2 = 20,
y1 = 10,
y2 = 100;
console.log(ctx, "2222"); // 打印可以看到画布的参数
// 线
ctx.beginPath(); //开始路径
// moveTo(x,y) lineTo(x,y) x是x轴位置,y是y轴位置
// lineCap有三个值 默认 butt , round 圆角 square 方角 round和square 会变长
ctx.moveTo(x1, y1); //路径开始点
ctx.lineTo(x2, y2); //路径结束点
ctx.strokeStyle = "#000";
ctx.lineWidth = 20;
ctx.lineCap = "butt"; // 默认
ctx.stroke(); // 绘制图形
// 圆角线
ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(50, 100);
ctx.lineCap = "round";
ctx.stroke();
// 正方线
ctx.beginPath();
ctx.moveTo(80, 10);
ctx.lineTo(80, 100);
ctx.lineCap = "square";
ctx.stroke();
lineJoin属性--当两条线交汇时,设置或返回所创建边角的类型
// 设置或返回所创建边角的类型,当两条线交汇时
// lineJoin有三个属性 bevel 斜角 round 圆角 miter为默认 创建尖角
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(20, 150);
ctx.lineTo(100, 200);
ctx.lineTo(20, 245);
ctx.stroke();
ctx.beginPath();
ctx.lineJoin = "bevel";
ctx.moveTo(80, 150);
ctx.lineTo(150, 200);
ctx.lineTo(80, 245);
ctx.stroke();
ctx.beginPath();
ctx.lineJoin = "miter";
ctx.moveTo(130, 150);
ctx.lineTo(210, 200);
ctx.lineTo(130, 245);
ctx.stroke();
miterLimit属性--最大斜角长度
//最大斜角长度
// 只有当 lineJoin 属性为 "miter" 时,miterLimit 才有效。
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineJoin = "miter";
ctx.miterLimit = 10;
// 把 miterLimit 设置为 4。如果斜接长度超过 miterLimit 的值,边角会以 lineJoin 的 "bevel" 类型来显示。
ctx.moveTo(20, 325);
ctx.lineTo(100, 340);
ctx.lineTo(20, 365);
ctx.stroke();
如果把ctx.miterLimit的值改为4就会看到明显的效果
这次分享为个人学习。欢迎各位大佬可以给我一些学习canvas的方法或建议