<!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>
网友回复
我知道答案，我要回答
私活外包
最新提问
DLNA与UPnP的区别和不同？
苏超自建抢票app，通过先预约再抽签化解高并发抢票？
python如何让给电脑在局域网中伪装成电视接收手机的投屏图片视频播放？
如何结合python+js如何自己的视频编码与加密播放直播？
python如何在电脑上通过局域网将本地视频或m3u8视频投屏电视播放？
腾讯视频爱奇艺优酷vip电影电视剧视频如何通过python绕过vip收费直接观看？
有没有可免费观看全球电视台直播m3u8地址url的合集？
有没有实现观影自由的免vip影视苹果 CMS V10 API的可用url？
python如何实时检测电脑usb插入检测报警？
如何判断真人操作的鼠标移动直线轨迹与机器操作的轨迹？
