<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<div>
<button id="save">保存</button>
<script type="text/javascript">
var arr = [{
locations: [[0,
0],
[200,
200],
[0,
400]],
color: "red"
},
{
locations: [[0,
0],
[400,
0],
[200,
200]],
color: "orange"
},
{
locations: [[0,
400],
[100,
300],
[200,
400]],
color: "yellow"
},
{
locations: [[100,
300],
[200,
200],
[300,
300],
[200,
400]],
color: "green"
},
{
locations: [[300,
100],
[200,
200],
[300,
300]],
color: "blue"
},
{
locations: [[300,
100],
[400,
0],
[400,
200],
[300,
300]],
color: "indigo"
},
{
locations: [[200,
400],
[400,
400],
[400,
200]],
color: "purple"
}];
var oCanvas = document.getElementById("canvas");
var ctx = oCanvas.getContext("2d");
for (let i = 0; i < arr.length; i++) {
draw(arr[i], ctx);
}
function draw(item, ctx) {
ctx.beginPath();
ctx.moveTo(item.locations[0][0], item.locations[0][1]);
for (let i = 0; i < item.locations.length; i++) {
let x = item.locations[i][0];
let y = item.locations[i][1];
ctx.lineTo(x, y);
console.log(1234567)
}
ctx.closePath();
ctx.fillStyle = item.color;
ctx.fill();
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.stroke();
}
var imgId = document.getElementById("imgId");
document.getElementById("save").onclick = function () {
downLoad(saveAsPNG(canvas));
}
// 保存成png格式的图片
function saveAsPNG(canvas) {
return canvas.toDataURL("image/png");
}
// 保存成jpg格式的图片
function saveAsJPG(canvas) {
return canvas.toDataURL("image/jpeg");
}
// 保存成bmp格式的图片 目前浏览器支持性不好
function saveAsBMP(canvas) {
return canvas.toDataURL("image/bmp");
}
/**
* @param {String} url 需要下载的文件地址
* */
function downLoad(url) {
var oA = document.createElement("a");
oA.download = ''; // 设置下载的文件名，默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
</script>
</div>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
最新提问
如何破解绕开seedance2.0真人照片生成视频 限制？
python有哪些算法可以将视频中的每个帧图片去除指定区域水印合成新的视频？
iphone的激光雷达数据能否实时传输到three三维空间中？
豆包sora等ai视频生成大模型生成的视频水印如何去除？
python如何实现在电脑上拨号打电话给手机？
具身机器人与人形机器人区别？
nodejs如何将一个完整的js代码文件切割成不同的部分混淆后动态加载进入html运行？
为啥windows.onerror捕获js错误是这样的{"message":"Script error.","source":"","lineno":0,"colno":0,"stack":null,
2026年ai将全面接管编程？
WebMCP是干啥的？
