canvas笔记-canvas加载图片及放缩及加水印(两canvas同时使用)

首先是图片放缩

程序运行截图如下：

拉动滑动条：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background: black">

<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>
<input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display: block; margin: 20px; width: 800px" />

<script>

    let canvas = document.getElementById("canvas");
    let context = canvas.getContext("2d");
    let image = new Image();
    let slider = document.getElementById("scale-range");

    window.onload = function(){

        canvas.width = 1152;
        canvas.height = 768;

        let scale = slider.value;

        image.src = "img/bg2.jpg";
        image.onload = function() {

            // context.drawImage(image, 50, 50);
            // context.drawImage(image, 0, 0, canvas.width, canvas.height);
            // context.drawImage(image, 600, 200, 400, 400, 200, 200, 400, 400);

            slider.onmousemove = function(){

                scale = slider.value;
                drawImageByScale(scale);
            }
        }
    }

    function drawImageByScale(scale){

        let imageWidth = 1152 * scale;
        let imageHeight = 768 * scale;

        let dx = canvas.width / 2 - imageWidth / 2;
        let dy = canvas.height / 2 -imageHeight / 2;

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(image, dx, dy, imageWidth, imageHeight);
    }

</script>

</body>
</html>

下面是水印，程序运行截图如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background: black">

<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>
<!--<canvas id="watermark-canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">-->
    <!--当前浏览器不支持canvas-->
<!--</canvas>-->

<canvas id="watermark-canvas" style="display: none; margin: 0 auto; border: 1px solid #aaa">
    当前浏览器不支持canvas
</canvas>

<script>

    let canvas = document.getElementById("canvas");
    let context = canvas.getContext("2d");
    let image = new Image();

    let watermarkCanvas = document.getElementById("watermark-canvas");
    let watermarkContext = watermarkCanvas.getContext("2d");

    window.onload = function(){

        canvas.width = 1152;
        canvas.height = 768;

        image.src = "img/bg2.jpg";
        image.onload = function() {

            drawImage(image);
        }

        watermarkCanvas.width = 600;
        watermarkCanvas.height = 100;

        watermarkContext.font = "bold 50px Arial";
        watermarkContext.lineWidth = 1;
        watermarkContext.fillStyle = "rgba(255, 255, 255)";
        watermarkContext.textBaseline = "middle";
        watermarkContext.fillText("ABCD中文!@E#$#", 20, 50);
    }

    function drawImage(image){

        let imageWidth = 1152;
        let imageHeight = 768;

        let dx = canvas.width / 2 - imageWidth / 2;
        let dy = canvas.height / 2 -imageHeight / 2;

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(image, dx, dy, imageWidth, imageHeight);
        context.drawImage(watermarkCanvas, canvas.width - watermarkCanvas.width, canvas.height - watermarkCanvas.height);
    }

</script>

</body>
</html>

canvas笔记-canvas加载图片及放缩及加水印(两canvas同时使用)

猜你喜欢