画画

2020-01-01 12:56:53 作者：互联网

(() => {
function log(...args) {
let dateNow = new Date(Date.now());
function fix2(number) {
number = Math.floor(number);
return number >= 1 ? number >= 10 ? number.toFixed(0) : `0${number}` : '00';
}
let a = `${fix2(dateNow.getHours())}:${fix2(dateNow.getMinutes())}`;
let key = `${dateNow.toDateString()} ${a}`;
let middle = `${fix2(dateNow.getSeconds())}.${fix2(dateNow.getMilliseconds() / 10)}`;
let value = args.map(String).join(' ');
if (typeof window.localStorage === 'object') {
localStorage.setItem(key, `${localStorage.getItem(key) ? `${localStorage.getItem(key)}\n` : ''}[${middle}] ${value}`);
}
console.log(`${a}:${middle} ${value}`);
}
function parseCanvas(canvas, doTranspose = false) {
let height = canvas.height;
let width = canvas.width;
let data = canvas.getContext('2d').getImageData(0, 0, width, height).data;
let result = [];
for (let x = 0; x < height; x++) {
for (let y = 0; y < width; y++) {
let index = (x * width + y) * 4;
result.push({
x: doTranspose ? y : x,
y: doTranspose ? x : y,
color: data.slice(index, index + 4)
});
}
}
return result;
}

function parseImage(imageElement) {
let canvas = document.createElement('canvas');
let height = imageElement.height;
let width = imageElement.width;
canvas.height = height;
canvas.width = width;
let cxt = canvas.getContext('2d');
cxt.drawImage(imageElement, 0, 0);
return parseCanvas(canvas);
}

if (doTranspose) {
([deltaX, deltaY] = [deltaY, deltaX]);
}
// console.log({deltaX,deltaY,doTranspose,targetHeight,targetWidth});
let targetCanvas = document.createElement('canvas');
targetCanvas.height = targetHeight;
targetCanvas.width = targetWidth;
let cxt = targetCanvas.getContext('2d');
cxt.drawImage(canvas, 0, 0, targetWidth, targetHeight);
return parseCanvas(targetCanvas, doTranspose).map(({ x, y, color }) => ({ x: x + deltaX, y: y + deltaY, color }));
},
async blog(blogLike) {
let link = this.access(blogLike, 'blog');
let result = await fetch(link);
let html = await result.text();
let parts = html.match(/<code.*?>((?:.|\n)*?)<\/code>/mg);
return this.mergeError(parts.map(part => () => {
// console.log(part);
let div = document.createElement('div');
div.innerHTML = part.match(/<code.*?>((?:.|\n)*?)<\/code>/m)[1];
let json = div.innerText;
return this.task(JSON.parse(json));
}));
},
async task(taskLike) {
// console.log('task',taskLike);
function flat(array) {
let result = [];
for (let subArray of array) {
for (let item of subArray) {
result.push(item);
}
}
return result;
}
let task = await this.mergeError({
point: async () => [await this.point(taskLike)],
transform: async () => await this.transform(taskLike),
blog: async () => await this.blog(taskLike),
image: () => this.image(taskLike),
taskArray: async () => flat(await Promise.all(taskLike.map(task => this.task(task)))),
});
return this.normalizeTask(task);
},
};

function wait(s) {
return new Promise(resolve => {
setTimeout(resolve, s * 1000);
});
}

return new Promise((resolve, reject) => {
manager.init();
manager.on('inited', () => {
function draw(task, x, y) {
draw.clearTask();
draw.addTask(task, x, y);
}
draw.taskFromLittleMing = { blog: 'https://www.luogu.com.cn/blog/user25512/paint' };
draw.draw = draw;
draw.addTask = async function addTask(task, x, y) {
task = await parser.task(task);
try {
parser.checkInteger(x, 0, H - 1);
parser.checkInteger(y, 0, W - 1);
task.forEach(point => {
point.x += x;
point.y += y;
});
} catch (e) {
// console.error(e);
}
task=formatTask(task);
preview(task);
manager.addTask(task);
}
draw.clearTask = function clearTask() {
manager.clearTask();
}
draw.addCookie = function addCookie(uid, clientID) {
manager.addCookie(uid, clientID);
}
draw.removeCookie = function removeCookie(uid) {
manager.removeCookie(uid);
}
window.draw = draw;
log('加载完成');
resolve();
});
});
})().then(() => {

// 把你的代码写在这个花括号里

/**
* x 坐标值表示行号（从上到下），范围 [0,399]
* y 坐标值表示列号（从左到右），范围 [0,799]
* 颜色编号范围 [0,31]
*/

/**
* 在 x=0, y=0（左上角）处绘制一个颜色编号为 2（灰色）的像素
* draw({x:0,y:0,colorID:2});
*/

/**
* 新的 draw 调用会覆盖原来的
* 在 x=0, y=799（右上角）处绘制一个颜色为 rgb(255,255,255) 的像素
* 在 x=399, y=0（左下角）处绘制一个颜色为 rgb(170,170,170) 的像素
* 在 x=399, y=799（右下角）处绘制一个颜色为 rgb(0,0,0) 的像素
* draw([
* {x:0,y:799,color:{r:255,g:255,b:255}},
* {x:399,y:0,color:[170,170,170]},
* {x:399,y:799,color:'#000000'}
* ]);
*/

/**
* 以 x=400, y=500 为左上角绘制 https://cdn.luogu.com.cn/upload/usericon/115864.png（神鱼的洛谷头像）
* draw('https://cdn.luogu.com.cn/upload/usericon/115864.png',400,500);
*/
draw('https://cdn.luogu.com.cn/upload/image_hosting/nxn8ao34.png',350,350);
/**
* 增加一些 Cookie
* 注意：使用增加 Cookie 功能需要你删除由洛谷创建的那个 Cookie！
* draw.addCookie('25512','...') // _uid, __client_id
* draw.addCookie('123456','...')
* draw.addCookie('25512','...') // uid 相同会覆盖 Cookie
* draw.removeCookie('123456') // 移除 Cookie
*/

/**
* 帮帮蒟蒻 Little_Ming 吧 QAQ
*/
// draw(draw.taskFromLittleMing);

/**
* 图片的放缩与平移
* draw({
* source:'https://cdn.luogu.com.cn/upload/usericon/115864.png', // %%% 神鱼！
* height:50, // 目标高度
* width:200, // 目标宽度
* deltaX:200, // 平移
* deltaY:200, // 总是先放缩再平移
* doTranspose:false, // 是否交换 XY？如果为 true，那么在平移之后交换所有点的 XY 坐标值。
* });
*/

/**
* 当然，你可以把各种东西一起画~
* draw([
* {
* source:[
* {x:200,y:555,color:8}
* {x:255,y:300,color:6},
* ],
* deltaX:100,
* deltaY:100
* },// 平移 x=100, y=100 意味着第一个点实际上会被画在 x=300, y=655
* 'https://cdn.luogu.org/upload/usericon/25512.png',
* draw.taskFromLittleMing
* ]);
*/

/**
* 如果在冬日绘版网页的控制台中运行脚本，则可以使用以下快捷键：
* - F：开关绘版更新。关闭绘版更新可以提高性能，增加后台挂机的稳定性。
* - G: 开关预览显示。有 bug，如果浏览器窗口足够宽（>640 像素），预览会左偏 5 像素。在绘版放大（不是浏览器放大）时预览也是错的 QAQ
*/

});

标签：canvas,task,return,画画,color,rgb,let
来源： https://www.cnblogs.com/wzsyyh/p/12128635.html