Canvas---Canvas图像处理、图片查看器、图像拖动实现、js面向对象编程

最新推荐文章于 2024-04-10 13:35:49 发布

MIKUScallion

最新推荐文章于 2024-04-10 13:35:49 发布

阅读量2.9k

点赞数

分类专栏：源代码文章标签： javascript HTML5 HTML canvas

本文链接：https://blog.csdn.net/mikuscallion/article/details/43377965

版权

模仿手机图像查看软件用canvas实现一个图像查看器。

目前实现：

1.利用将图像起点绘制到canvas之外的技术实现了图像的缩放。

包括，图像自适应、图像放大缩小

2.利用路径判断实现，鼠标拖动图像

目前存在问题：

1.由于拖动改变当前图像显示中点，而缩放的时候，使用的中点没有改变，造成跳动。

2.拖动没有做范围规范，可以拖动到死。

本次更新特色：

1.使用js面向对象编程重写大部分代码，代码重用性提高。

截图：

本文由 CSDN MIKUScallion 原创，更多canvas案例代码：http://blog.csdn.net/mikuscallion

源代码：

①本体代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            canvas{
                background-color: black;
            }
            .contain{
                margin: 0 auto;
                width: 480px;
                height: 640px;
                position: relative;
            }
            .scaleSlider{
                margin: 0px;
                padding: 0px;
                position: absolute;
                /*旋转元素*/
                transform:rotate(-90deg);
                top: 70px;
                left:400px;
            }
        </style>
        <script type="text/javascript" src="MikuJsLibs/mikuCanvasContextHelp.js"></script>
        <script type="text/javascript" src="MikuJsLibs/mikuCanvasClass.js"></script>
        <script type="text/javascript" src="MikuJsLibs/mikuCanvasImageUtil.js"></script>
    </head>
    <body>
        <div class="contain">
            <input id="scaleSlider" class="scaleSlider" type="range" min="0.25" max="4" step="0.01" value="1

最低0.47元/天解锁文章

MIKUScallion

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas---Canvas图像处理、图片查看器、图像拖动实现、js面向对象编程

模仿手机图像查看软件用canvas实现一个图像查看器。目前实现：1.利用将图像起点绘制到canvas之外的技术实现了图像的缩放。包括，图像自适应、图像放大缩小2.利用路径判断实现，鼠标拖动图像目前存在问题：1.由于拖动改变当前图像显示中点，而缩放的时候，使用的中点没有改变，造成跳动。2.拖动没有做范围规范，可以拖动到死。本次更新特色：1.使用js面
复制链接

扫一扫