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("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/2d");
    let image = new Image();
 
    let watermarkCanvas = document.getElementById("watermark-canvas");
    let watermarkContext = watermarkCanvas.getContext("https://cdn.jxasp.com:9143/image/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同时使用)

详情内容

相关技术文章

最新源码

下载排行榜

提示信息

选择支付方式