Canvas 图形-02：绘制基本图形、调色板
绘制基本图形、调色板
<!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>直线</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
canvas {
border: 1px dashed;
margin-right: 5px;
}
</style>
<script>
function $$id(id) {
return document.getElementById(id);
}
window.onload = function () {
// 1.绘制直线
(() => {
const cnv = $$id("canvas1");
const ctx = cnv.getContext("2d");
ctx.moveTo(20, 100);
ctx.lineTo(150, 50);
ctx.stroke();
})();
// 2.多路径
(() => {
const cnv = $$id("canvas2");
const ctx = cnv.getContext("2d");
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.moveTo(50, 100);
ctx.lineTo(100, 100);
ctx.stroke();
})();
// 3. linTo连续
(() => {
const cnv = $$id("canvas3");
const ctx = cnv.getContext("2d");
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(50, 100);
ctx.lineTo(100, 100);
ctx.stroke();
})();
// 4. 三角形
(() => {
const cnv = $$id("canvas4");
const ctx = cnv.getContext("2d");
ctx.moveTo(50, 100);
ctx.lineTo(150, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 100);
ctx.stroke();
})();
// 5. 矩形
(() => {
const cnv = $$id("canvas5");
const ctx = cnv.getContext("2d");
ctx.moveTo(50, 100);
ctx.lineTo(150, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.lineTo(50, 100);
ctx.stroke();
})();
// 6. strokeRect函数绘制矩形
(() => {
const cnv = $$id("canvas6");
const ctx = cnv.getContext("2d");
ctx.strokeStyle = "red";
ctx.strokeRect(50, 50, 100, 50);
})();
// 7. fillRect函数绘制填充矩形
(() => {
const cnv = $$id("canvas7");
const ctx = cnv.getContext("2d");
ctx.fillStyle = "HotPink";
ctx.fillRect(50, 50, 100, 50);
})();
// 8. 描边和填充同时使用
(() => {
const cnv = $$id("canvas8");
const ctx = cnv.getContext("2d");
ctx.strokeStyle = "red";
ctx.strokeRect(50, 50, 100, 50);
ctx.fillStyle = "#FFE8E8";
ctx.fillRect(50, 50, 100, 50);
})();
// 9. 两个fill矩形
(() => {
const cnv = $$id("canvas9");
const ctx = cnv.getContext("2d");
ctx.fillStyle = "HotPink";
ctx.fillRect(20, 20, 100, 50);
ctx.fillStyle = "rgba(0, 0, 255, 0.3)";
ctx.fillRect(50, 50, 100, 50);
})();
// 10. rect函数绘制矩形
(() => {
const cnv = $$id("canvas10");
const ctx = cnv.getContext("2d");
// 等价于
// ctx.strokeStyle ="red"
// ctx.strokeRect(50, 50, 100, 50)
ctx.strokeStyle = "red";
ctx.rect(50, 50, 100, 50);
ctx.stroke();
// 等价于
// ctx.fillStyle ="#FFE8E8"
// ctx.fillRect(50, 50, 100, 50)
ctx.fillStyle = "#FFE8E8";
ctx.rect(50, 50, 100, 50);
ctx.fill();
})();
// 11. clearRect函数清除指定区域
(() => {
const cnv = $$id("canvas11");
const ctx = cnv.getContext("2d");
ctx.fillStyle = "HotPink";
ctx.fillRect(50, 50, 100, 50);
ctx.clearRect(60, 60, 60, 30);
})();
// 12. 清除
(() => {
const cnv = $$id("canvas12");
const ctx = cnv.getContext("2d");
ctx.fillStyle = "HotPink";
ctx.fillRect(50, 50, 100, 50);
$$id("clear12").onclick = function (e) {
ctx.clearRect(0, 0, cnv.width, cnv.height);
};
})();
// 13.绘制多边形
(() => {
const cnv = $$id("canvas13");
const ctx = cnv.getContext("2d");
ctx.moveTo(40, 60);
ctx.lineTo(100, 60);
ctx.lineTo(100, 30);
ctx.lineTo(140, 80);
ctx.lineTo(100, 130);
ctx.lineTo(100, 100);
ctx.lineTo(40, 100);
ctx.lineTo(40, 60);
ctx.stroke();
})();
// 14. 多边形封装
(() => {
const cnv = $$id("canvas14");
const ctx = cnv.getContext("2d");
createPolygon(ctx, 6, 100, 75, 50);
ctx.fillStyle = "HotPink";
ctx.fill();
/**
* n: n多边形
* dx: 中心x坐标
* dy: 中心y坐标
* size: 大小
*/
function createPolygon(ctx, n, dx, dy, size) {
ctx.beginPath();
const degree = (2 * Math.PI) / n;
for (let i = 0; i < n; i++) {
const x = Math.cos(i * degree);
const y = Math.sin(i * degree);
ctx.lineTo(x * size + dx, y * size + dy);
}
ctx.closePath();
}
})();
// 15. 五角星
(() => {
const cnv = $$id("canvas15");
const ctx = cnv.getContext("2d");
ctx.beginPath();
const dx = 100,
dy = 75;
for (let i = 0; i < 5; i++) {
ctx.lineTo(
Math.cos(((18 + 72 * i) * Math.PI) / 180) * 50 + dx,
-Math.sin(((18 + 72 * i) * Math.PI) / 180) * 50 + dy
);
ctx.lineTo(
Math.cos(((54 + 72 * i) * Math.PI) / 180) * 25 + dx,
-Math.sin(((54 + 72 * i) * Math.PI) / 180) * 25 + dy
);
}
ctx.closePath();
ctx.stroke();
})();
// 16. 方格调色板
(() => {
const cnv = $$id("canvas16");
const ctx = cnv.getContext("2d");
const stride = 255 / 6;
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx.fillStyle =
"rgb(" +
Math.floor(i * stride) +
"," +
Math.floor(j * stride) +
",0)";
ctx.fillRect(i * 25, j * 25, 25, 25);
}
}
})();
// 17. 渐变调色板
(() => {
const cnv = $$id("canvas17");
const ctx = cnv.getContext("2d");
let r = 255,
g = 0,
b = 0;
for (let i = 0; i < 125; i++) {
if (i < 25) {
g += 10;
} else if (i > 25 && i < 50) {
r -= 10;
} else if (i > 50 && i < 75) {
g -= 10;
b += 10;
} else if (i > 75 && i < 100) {
r += 10;
} else {
b -= 10;
}
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
console.log(ctx.fillStyle);
ctx.fillRect(i * 2, 0, 2, 150);
}
})();
// 模板
(() => {
const cnv = $$id("canvas3");
const ctx = cnv.getContext("2d");
})();
};
</script>
</head>
<body>
<div class="container">
<canvas id="canvas1" width="200" height="150"></canvas>
<canvas id="canvas2" width="200" height="150"></canvas>
<canvas id="canvas3" width="200" height="150"></canvas>
<canvas id="canvas4" width="200" height="150"></canvas>
<canvas id="canvas5" width="200" height="150"></canvas>
<canvas id="canvas6" width="200" height="150"></canvas>
<canvas id="canvas7" width="200" height="150"></canvas>
<canvas id="canvas8" width="200" height="150"></canvas>
<canvas id="canvas9" width="200" height="150"></canvas>
<canvas id="canvas10" width="200" height="150"></canvas>
<canvas id="canvas11" width="200" height="150"></canvas>
<canvas id="canvas12" width="200" height="150"></canvas>
<input
id="clear12"
type="button"
style="height: 25px"
value="清空canvas"
/>
<canvas id="canvas13" width="200" height="150"></canvas>
<canvas id="canvas14" width="200" height="150"></canvas>
<canvas id="canvas15" width="200" height="150"></canvas>
<canvas id="canvas16" width="200" height="150"></canvas>
<canvas id="canvas17" width="200" height="150"></canvas>
</div>
</body>
</html>
预览
浙公网安备 33010602011771号