<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
    // 绘制背景网格
    drawGrid('lightgray', 10, 10);

    // 第一次设置样式
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 4;
    ctx.lineCap = "round";

    // 绘制线条
    ctx.beginPath();
    ctx.moveTo(50, 70);
    ctx.lineTo(500, 70);
    ctx.stroke();

    // 绘制矩形1
    ctx.strokeRect(50, 120, 200, 120);

    // 第二次设置样式
    ctx.strokeStyle = "red";

    // 绘制矩形2
    ctx.strokeRect(300, 120, 200, 120);
</script>

<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
    // 绘制背景网格
    drawGrid('lightgray', 10, 10);

    // 渲染文字定义
    let textArray = [
        {"text":"通过"},
        {"text":"技术创新", "color":"red"},
        {"text":"促动"},
        {"text":"管理变革", "color":"red"},
        {"text":"，建成"},
        {"text":"“规建运、营配调”一体化管控", "color":"blue"},
        {"text":"系统。"}
    ];

    // 根据定义，逐个渲染文字
    let x = 40, y=50;
    ctx.save();
    ctx.font = "24px 黑体";
    ctx.textBaseline = "top";
    textArray.forEach(textObj => {
        x+= drawText(textObj, x, y);
    })
    ctx.restore();

    /**
     * 绘制文字函数
     */
    function drawText(textObj, x, y) {
        ctx.save();
        if(textObj.color != null) {
            ctx.fillStyle = textObj.color;
        }
        ctx.fillText(textObj.text, x, y);
        ctx.restore();
        return ctx.measureText(textObj.text).width;
    }
</script>

<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
    // 绘制背景网格
    drawGrid('lightgray', 10, 10);

    // 建立裁切区域
    ctx.beginPath();
    ctx.arc(200, 220, 150, 0, 2 * Math.PI);
    ctx.moveTo(450, 220);
    ctx.arc(450, 220, 150, 0, 2 * Math.PI);
    ctx.clip();

    // 加载并绘制图片
    let image = new Image();
    image.onload = function () {
        // 在画布中绘制图像，由于在绘制图像之前定义了裁切路径，因此该图片只有部分内容会被渲染出来。
        ctx.drawImage(image, 10, 10, 780, 430);
    }
    image.src = "./images/j20.jpg";
</script>

<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
    let ready = false;

    // 加载并绘制图片
    let image = new Image();
    image.onload = function () {
        ready = true;
        reDraw(150, 150);
    }
    image.src = "./images/j20.jpg";

    // 增加鼠标移动事件
    canvas.addEventListener('mousemove', function (e) {
        e.preventDefault();
        e.stopPropagation();
        reDraw(e.offsetX, e.offsetY);
    }, false);

    // 重绘图像
    function reDraw(x, y) {
        // 清除背景
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制背景网格
        drawGrid('lightgray', 10, 10);

        ctx.save();

        // 建立裁切区域
        ctx.beginPath();
        ctx.arc(x, y, 100, 0, 2 * Math.PI);
        ctx.clip();

        // 在画布中绘制图像
        if (ready == true) {
            ctx.drawImage(image, 10, 10, 780, 430);
        }

        // 十字光标
        ctx.beginPath();
        ctx.moveTo(x-20, y);
        ctx.lineTo(x+20, y);
        ctx.moveTo(x, y-20);
        ctx.lineTo(x, y+20);
        ctx.strokeStyle="white";
        ctx.stroke();
        ctx.restore();
    }
</script>

<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
    let beginDrag = false;
    let ready = false;   

    // 绘制图像
    let image = new Image();
    image.onload = function () {
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        drawGrid('lightgray', 0, 0, ctx);
    }
    image.src = "./images/j20.jpg";

    // 橡皮檫功能实现
    function erase(x, y) {
        // 当鼠标键按下时，移动鼠标箭头，即可擦除覆盖物
        if (beginDrag === true) {
            ctx.save();
            // 建立裁切区域
            ctx.beginPath();
            ctx.arc(x, y, 40, 0, 2 * Math.PI);
            ctx.clip();

            // 清除画面
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 补齐背景网格
            drawGrid('lightgray', 10, 10);
            ctx.restore();
        }
    }


    // 鼠标键按下事件
    canvas.addEventListener('mousedown', function (e) {
        beginDrag = true;
    }, false);

    // 鼠标键抬起事件
    canvas.addEventListener('mouseup', function (e) {
        beginDrag = false;
    }, false);

    // 增加鼠标移动事件
    canvas.addEventListener('mousemove', function (e) {
        e.preventDefault();
        e.stopPropagation();
        erase(e.offsetX, e.offsetY, false);
    }, false);
</script>

<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d', { willReadFrequently: true });

    // (1)加载图像
    let image = new Image();
    image.onload = function () {
        draw();
    }
    image.src = "./images/square_150.png"

    // (2)为画布增加click事件
    canvas.addEventListener("click", function (e) {
        let imageData = ctx.getImageData(e.offsetX, e.offsetY, 1, 1);
        // (3)获取鼠标click位置imageData中的颜色
        let color = "rgba(" + imageData.data[0] + "," + imageData.data[1] + "," + imageData.data[2] + "," + imageData.data[3] + ")";
        draw(color);
    })

    // 绘制图像
    function draw(color) {
        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制背景网格
        drawGrid('lightgray', 10, 10);

        // 在画布中绘制图像
        ctx.drawImage(image, 50, 50);

        // (4) 使用该颜色绘制一个矩形
        if (color) {
            ctx.save();
            ctx.fillStyle = color;
            ctx.fillRect(300, 50, 350, 150);
            ctx.restore();
        }
        ctx.strokeRect(300, 50, 350, 150);
    }
</script>

<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
    let imageSize = [360, 340];
    // 绘制背景网格
    drawGrid('lightgray', 10, 10);

    // 加载并绘制图片
    let image = new Image();
    image.onload = function () {
        // 在画布中绘制图像
        ctx.drawImage(image, 20, 40, imageSize[0], imageSize[1]);
        // 复制图像
        copyImage();

        ctx.font = "16px 黑体";
        ctx.textAlign = "center";
        ctx.fillText("（原图）", 20 + imageSize[0]/2, 400);
        ctx.fillText("（使用灰度滤镜后产生的图像）", 400 + imageSize[0]/2, 400)
    }
    image.src = "./images/ma.png";

    /**
     * 复制图像函数
     */
    function copyImage() {
        // 获取imageData
        let imageData = ctx.getImageData(20, 40, imageSize[0], imageSize[1]);
        // 像素处理（滤镜）
        grayscaleFilter(imageData);
        // 显示在某位置
        ctx.putImageData(imageData, 400, 40);
    }

    /**
     * 灰度滤镜
     */
    function grayscaleFilter(imageData) {
        let data = imageData.data,
            len = data.length,
            brightness;
        // 对逐个像素值进行处理
        for (let i = 0; i < len; i += 4) {
            brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
            data[i] = brightness;
            data[i + 1] = brightness;
            data[i + 2] = brightness;
        }
    }
</script> 

<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
    // 绘制背景网格
    drawGrid('lightgray', 10, 10);

    // 背景图像数据，重绘时将使用该数据重绘背景
    let backgroundImageData = drawRandomRound();
    let beginDraw = false;  // 是否开始绘制矩形
    let startX, startY;     // 鼠标按下去时的坐标

    /**
     * 随机生成背景，并返回该背景imageData
     */
    function drawRandomRound() {
        // 定义圆的半径和颜色
        let colors = ["153,0,0,", "204,0,0,", "255,0,0,", "255,64,64,", "255,128,128,"];
        let radius = [15, 30, 45, 60, 75];

        // 随机绘制100个圆
        for (let i = 0; i < 100; i++) {
            let x = getRandomNum(0, canvas.width);
            let y = getRandomNum(0, canvas.height);
            ctx.beginPath();
            ctx.arc(x, y, radius[i % 5], 0, 2 * Math.PI);
            ctx.fillStyle = "rgba(" + colors[i % 5] + getRandomNum(1, 5) / 10 + ")";
            ctx.fill();
        }

        // 获取imageData
        return ctx.getImageData(0, 0, canvas.width, canvas.height);
    }

    // 增加鼠标移动事件
    canvas.addEventListener('mouseup', function (e) {
        e.preventDefault();
        e.stopPropagation();
        beginDraw = false;
    }, false);

    // 增加鼠标移动事件
    canvas.addEventListener('mousedown', function (e) {
        e.preventDefault();
        e.stopPropagation();
        beginDraw = true;
        startX = e.offsetX;
        startY = e.offsetY;
    }, false);

    // 增加鼠标移动事件
    canvas.addEventListener('mousemove', function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (beginDraw == true) {
            doDrawRect(e.offsetX, e.offsetY);
        }
    }, false);

    /**
     *  重新绘制背景+矩形
     */
    function doDrawRect(x, y) {
        ctx.putImageData(backgroundImageData, 0, 0);
        ctx.strokeRect(startX, startY, x - startX, y - startY);
    }
</script>

<!DOCTYPE html>
<html>

<head>
    <title>画布操作(toDataUrl)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:基础篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,ladder,javascript">
    <style>
        img { margin-left: 10px }
    </style>
</head>

<body style="overflow: hidden;">
    <div style="margin:0 auto; width:900px;">
        <div style="margin:0 auto; width:600px;">
            <canvas id="canvas" width="800" height="600" style="border:solid 10px goldenrod;"></canvas>
        </div>
        <div id="toolbar" style="text-align:center;"></div>           
    </div>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');

    // 加载并绘制图片
    let image = new Image();
    image.onload = function () {
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.parentElement.style.width = (canvas.width + 20)+ "px";
        ctx.drawImage(image, 0, 0);
        filterImage(sepia, "怀旧");
        filterImage(grayscaleFilter, "灰度");
        filterImage(brighten, "亮度调节");
        filterImage(noise, "噪声调节");
        filterImage(invert, "反色");
        // 显示文字
        drawText("原 图", ctx);
    }
    image.src = "./images/girl.png";

    /**
     * 使用滤镜处理图像，并显示在html页面中
     */
    function filterImage(filter, text) {
        // 使用滤镜处理原canvas中的图像
        let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        filter(imageData)

        // 创建临时画布，用于渲染经过滤镜处理后的图像
        let tempCanvas = document.createElement("canvas");
        tempCanvas.width = imageData.width;
        tempCanvas.height = imageData.height;
        let context = tempCanvas.getContext("2d");
        context.putImageData(imageData, 0, 0);

        // 显示文字
        drawText(text, context);

        // 将裁切的图像转换为图片
        let base64url = tempCanvas.toDataURL();

        // 在html中建立img对象，显示转换后的图片
        let img = document.createElement("img");
        img.width = 160;
        img.src = base64url;
        document.getElementById("toolbar").appendChild(img);

        // 清除临时画布
        tempCanvas.width = 0;
        tempCanvas.height = 0;
        tempCanvas = null;
    }

    /**
     * 绘制文字
     */
    function drawText(text, context) {
        context.save();
        context.font = "24px 黑体"
        context.textAlign = "center";
        context.strokeStyle="white";
        context.lineWidth = 6;
        context.strokeText(text, context.canvas.width/2, 30);
        context.fillText(text, context.canvas.width/2, 30);
        context.restore();
    }

    /**
     * 灰度滤镜
     */
    function grayscaleFilter(imageData) {
        let data = imageData.data, brightness;
        for (let i = 0; i < data.length; i += 4) {
            brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
            data[i] = brightness;
            data[i + 1] = brightness;
            data[i + 2] = brightness;
        }
    }

    /**
     * 亮度调节滤镜
     */
    function brighten(imageData, options = {}) {
        let data = imageData.data, brightness = (options.brightness || 0.2) * 255;
        for (let i = 0; i < data.length; i += 4) {
            data[i] += brightness;
            data[i + 1] += brightness;
            data[i + 2] += brightness;
        }
    }

    /**
     * 反色滤镜
     */
    function invert(imageData) {
        let data = imageData.data;
        for (let i = 0; i < data.length; i += 4) {
            data[i] = 255 - data[i];
            data[i + 1] = 255 - data[i + 1];
            data[i + 2] = 255 - data[i + 2];
        }
    }

    /**
     * 怀旧滤镜
     */
    function sepia(imageData) {
        let data = imageData.data, i, r, g, b;
        for (i = 0; i < data.length; i += 4) {
            r = data[i + 0];
            g = data[i + 1];
            b = data[i + 2];
            data[i + 0] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
            data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
            data[i + 2] = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);
        }
    }

    /**
     * 噪声调节滤镜
     */
    function noise(imageData, options = {}) {
        let noise = options.noise || 0.4;
        let amount = noise * 255, data = imageData.data, half = amount / 2;
        for (let i = 0; i < data.length; i += 4) {
            data[i + 0] += half - 2 * half * Math.random();
            data[i + 1] += half - 2 * half * Math.random();
            data[i + 2] += half - 2 * half * Math.random();
        }
    }
</script>

</html>