import { canvas, ctx, viewSize } from "./index.js";
import {
    drawRect,
    drawCircle,
    clearCanvas,
    drawTriangle,
    drawPolygon,
    readImage,
    getCanvasXYColor,
    grayscale,
    saveCanvasImage,
    getGradient,
    getRadialGradient

} from "./canvas.js";
import { clock } from "./clock.js";

console.log("ctx :>> ", ctx);
// 画一个矩形
// ctx.fillStyle = "#f00";
// ctx.fillRect(0, 0, 200, 100);
// 画一个长方形
drawRect(ctx, 100, 100, 200, 100, "green");
// 画一个圆
drawCircle(ctx, 150, 300, 50, "blue");
// 画一个正方形
drawRect(ctx, 100, 400, 100, 100, "green");
// 清除画布
// clearCanvas(ctx)
// 画一个三角形
drawTriangle(ctx, 100, 700, 100, 100, "blue")
// 画一个多边形
drawPolygon(ctx, 400, 150, 50, 8, "#4507ac")
// 画一个钟表
clock(ctx)
// 插入一张图片
readImage("./sample.png").then(img => {
    console.dir(img);
    ctx.drawImage(img, 500, 100, 100, 100)
    grayscale(ctx, img)
}).catch(err => {
    console.log('err :>> ', err);
})

// 点击获取该点的rgba颜色值
canvas.addEventListener("click", function (event) {
    // 保存图片
    // saveCanvasImage(canvas)
    getCanvasXYColor(ctx, event);

})

// 复制某个区域
const copyimg = ctx.getImageData(0, 0, 200, 200);
ctx.putImageData(copyimg, 600, 0);


// 画一个线性渐变色矩形
const gradient = getGradient(ctx, [300, 300, 400, 400], "#f00", "blue")
drawRect(ctx, 300, 300, 200, 100, gradient)

// 画一个线性渐变色三角形
const gradient2 = getRadialGradient(ctx, [500, 800, 50, 500, 900, 200], "green", "blue")
drawRect(ctx, 500, 800, 200, 200, gradient2)

// 创建图案，并用图案填充矩形
readImage("./imgs/3.png").then(img => {
    // 1、创建图案
    const pattern = ctx.createPattern(img, "repeat");
    drawRect(ctx, 900, 100, 200, 200, pattern)
}).catch(err => {
    console.log('err :>> ', err);
})