canvas学习之图像的基本操作

最新推荐文章于 2024-08-13 12:49:55 发布

原创最新推荐文章于 2024-08-13 12:49:55 发布 · 509 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用HTML滑动条控制Canvas中图像的缩放效果，包括滑动条和图像加载的定义、图像缩放函数的实现及完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们要实现的是拖动一个滑动条，来实现图像的缩放

首先是滑动条的定义

在html 中

<div id = 'controls'>
<input id = "scaleSlider" type = "range"  min = "0.1" max ="2" step = "0.01" value = "1.0"/>
</div>

然后是在css中定义其属性

 #scaleSlider{
            position: absolute;
            top:20px;

然后是在js中找到这个滑动条和进行改变

scaleSlider.onchange = function(e) {
 	scale = e.target.value;
 }

具体可见这个网站

随后是将滑动条的数值进行输出

<form oninput = "x.value = scaleSlider.value">
<output name = "x" for "scaleSlider"></output>
</form>

但好像没有实现已经实现了

图像进行缩放

在js 中定义图像的加载和在滑动条的改变值过程当中，实现图像的缩放

图像进行加载的函数

 //图像进行加载
 function drawImage(scale) {
 	var img =new Image();
 	img.src = "blue_flower.png";
 	img.onload = function(e) {
    context.drawImage(img,0,0,1.0/scale*img.width,1.0/scale*img.height,0,0,canvas.width,canvas.height);
 	}
 }

图像进行缩放的函数

scaleSlider.onchange = function(e) {
 	//需要先清理图像
 	context.clearRect(0,0,canvas.width,canvas.height);
 	scale = e.target.value;
 	//加载图片的函数进行调用
    drawImage(scale);
 }

整体的js代码就是这样

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
 scaleSlider.onchange = function(e) {
 	//需要先清理图像
 	context.clearRect(0,0,canvas.width,canvas.height);
 	scale = e.target.value;
 	//加载图片的函数进行调用
    drawImage(scale);
 }
 //图像进行加载
 function drawImage(scale) {
 	var img =new Image();
 	img.src = "blue_flower.png";
 	img.onload = function(e) {
    context.drawImage(img,0,0,1.0/scale*img.width,1.0/scale*img.height,0,0,canvas.width,canvas.height);
 	}
 }

html的代码就是这样

<!DOCTYPE html>

<html>

<head>
    <title>例1</title>

    <style>
        body {
            background: #dddddd;
        }
        #scaleSlider{
            position: absolute;
            top:20px;
        }
        #canvas {
           
            border: thin inset #aaaaaa;
            
            background-color: white;
        }
        #shuchu{
            position: absolute;
            top:10px;
        }
    </style>
</head>

<body>
<div id = 'controls'>
<!--定义滑动条值得输出-->
<form oninput = "x.value = scaleSlider.value">
<output name = "x", id = "shuchu",for "scaleSlider">1.0</output>
<!--定义滑动条-->
<input id = "scaleSlider" type = "range"  min = "0.1" max ="2" step = "0.01" value = "1.0"/></form>
</div>
    <canvas id='canvas' width='600' height='300'>
        Canvas not supported
    </canvas>

    <script src='example1.js'></script>
</body>

</html>

最后的效果图就是这样