HTML5 Canvas图像放大、移动实例1

最新推荐文章于 2023-10-21 16:04:26 发布

原创

最新推荐文章于 2023-10-21 16:04:26 发布 · 637 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #javascript

本文介绍了如何使用HTML5 Canvas实现图像的放大和移动功能。通过前台代码展示，结合JavaScript处理鼠标滚轮事件，实现了图像的交互操作。读者将学习到Canvas的基本绘图操作和事件监听技巧。

1.前台代码

<canvas id="canvasOne" class="myCanvas" width="500" height="500"></canvas>
<script>
    /***************绘制图像，放大缩小实例******************/
    var canvas = document.getElementById('canvasOne');
    var ctx = canvas.getContext('2d');
    //加载图片
    var scale = 0.1;//缩放比例
    var img = new Image();
    img.onload = function () {
        reShow();
    }
    img.src = '../images/1.jpg';
    //根据缩放比例，显示图片
    function reShow() {
        var cWidth = canvas.width;
        var cHeight = canvas.height;
 
        var iWidth = img.width;
        var iHeight = img.height;
        var width = iWidth * scale;
        var height = iHeight * scale;
 
        //居中显示
        var left = (cWidth - width) / 2;
        var top = (cHeight - height) / 2;
 
        //清空画布极限值 --失败
        //var maxWidth = iWidth > width ? iWidth : width;
        //var maxHeight = iHeight > height ? iHeight : height;
        //var minLeft = left < 0 ? left :