模拟触摸方式滚动canvas

最新推荐文章于 2024-07-29 11:15:00 发布

qin9r3y

最新推荐文章于 2024-07-29 11:15:00 发布

阅读量6.5k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qin9r3y/article/details/21388747

版权

为提升大尺寸canvas滚动体验，本文介绍如何通过在canvas上直接进行触摸拖拽来模拟滚动效果，避免了使用html原生滚动条导致的大canvas重绘卡顿问题。若canvas尺寸固定且较小，使用html滚动条仍是简洁的解决方案。文中包含一个示例demo。

摘要由CSDN通过智能技术生成

当canvas过大时需要加滚动条，为提高体验性最好以直接在canvas上触摸拖拽来滚屏胡。直接利用html自带的滚动条并不是最佳的实现方式，因为当canvas很大时即使只显示一部分也需要重绘整个canvas，此时滚动也会很卡。所以最佳的实现是直接用canvas模拟画出滚动条并加以鼠标交互。但如果canvas很小切大小也比较固定，沿用html的滚动条也能使实现简单化。下面是个demo：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>demo</title>
    <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function init() {
            var $cvs1 = $('#cvs1');
            $cvs1[0].width = 800;
            $cvs1[0].height = 600;
            var context = $cvs1[0].getContext('2d');
            context.beginPath();
            context.arc(400, 300, 100, 0, Math.PI * 2, false);