javascript - 通过 HTML5 Canvas Context 缩放并在给定图像上绘制网格-6ren

javascript - 通过 HTML5 Canvas Context 缩放并在给定图像上绘制网格

转载作者：行者123 更新时间：2023-11-30 17:52:01

使用 HTML5 元素，我想加载一个图像文件(PNG、JPEG 等)，将其绘制到 Canvas 上，然后在图像顶部绘制一个网格；

此外，我正在尝试为矩形设置矩形边距和完全透明的内容；

可以找到我尝试修改的例子here

在我的 fiddle 上 here

<!DOCTYPE html>
<!-- saved from url=(0048)http://phrogz.net/tmp/canvas_zoom_to_cursor.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Zooming via HTML5 Canvas Context</title>
    <style type="text/css" media="screen">
        body { background:#eee; margin:1em; text-align:center; }
        canvas { display:block; margin:1em auto; background:#fff; border:1px solid #ccc }
    </style>
</head><body style="-webkit-user-select: none;">
<p>Showing how to use transform methods on the HTML5 Canvas Context to selectively zoom in and out. Drag to pan. Click to zoom at that location. Shift-click to zoom out. Mousewheel up/down over the canvas to zoom in to/out from that location.</p>
<p>By redrawing the canvas at different scales the strokes remain smooth during zooming. For example, zoom in on the earring or circle on the forehead to see fine detail.</p>
<canvas width="800" height="600"></canvas>
<p id="footer">Copyright © 2011 <a href="mailto:!@phrogz.net">Gavin Kistner</a>. Written to support <a href="http://stackoverflow.com/questions/5189968/zoom-to-cursor-calculations/5526721#5526721">this Stack Overflow answer</a>.</p>
<script type="text/javascript" charset="utf-8">
    var canvas = document.getElementsByTagName('canvas')[0];
    canvas.width = 800; canvas.height = 600;
    var gkhead = new Image;
    var ball   = new Image;
    window.onload = function(){     
        var ctx = canvas.getContext('2d');
        trackTransforms(ctx);
        function redraw(){
            // Clear the entire canvas
            var p1 = ctx.transformedPoint(0,0);
            var p2 = ctx.transformedPoint(canvas.width,canvas.height);
            ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);

            // Alternatively:
            // ctx.save();
            // ctx.setTransform(1,0,0,1,0,0);
            // ctx.clearRect(0,0,canvas.width,canvas.height);
            // ctx.restore();

            ctx.drawImage(gkhead,50,50);//punct stanga sus imagine cu marton
            console.log(ctx);

            ctx.fillStyle="#FF0000";
            ctx.fillRect(50,50,60,60);

            ctx.beginPath();
            ctx.lineWidth = 10;//rama 10
            ctx.moveTo(399,250);
            ctx.lineTo(474,256);
            ctx.stroke();

            ctx.save();
            ctx.translate(4,2);
            ctx.beginPath();
            ctx.lineWidth = 1;//rama 1
            ctx.moveTo(436,253);
            ctx.lineTo(437.5,233);
            ctx.stroke();

            ctx.save();
            ctx.translate(438.5,223);
            ctx.strokeStyle = '#06c';
            ctx.beginPath();
            ctx.lineWidth = 0.05;
            for (var i=0;i<60;++i){
                ctx.rotate(6*i*Math.PI/180);
                ctx.moveTo(9,0);
                ctx.lineTo(10,0);
                ctx.rotate(-6*i*Math.PI/180);
            }
            ctx.stroke();
            ctx.restore();

            //ctx.beginPath();
            //ctx.lineWidth = 0.2;
            //ctx.arc(438.5,223,10,0,Math.PI*2);
            //ctx.stroke();
            //ctx.restore();

            //ctx.drawImage(ball,379,233,40,40);//bila stanga
            //ctx.drawImage(ball,454,239,40,40);//bila dreapta
            //ctx.drawImage(ball,310,295,20,20);//bila jos
            //ctx.drawImage(ball,314.5,296.5,5,5);//ochi stang
            //ctx.drawImage(ball,319,297.2,5,5);//ochi drept
        }
        redraw();

        var lastX=canvas.width/2, lastY=canvas.height/2;
        var dragStart,dragged;
        canvas.addEventListener('mousedown',function(evt){
            document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
            console.log(lastX + ' ' + lastY);
            dragStart = ctx.transformedPoint(lastX,lastY);
            dragged = false;
        },false);
        canvas.addEventListener('mousemove',function(evt){
            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
            dragged = true;
            if (dragStart){
                var pt = ctx.transformedPoint(lastX,lastY);
                ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
                redraw();
            }
        },false);
        canvas.addEventListener('mouseup',function(evt){
            dragStart = null;
            if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
        },false);

        var scaleFactor = 1.1;
        var zoom = function(clicks){
            var pt = ctx.transformedPoint(lastX,lastY);
            ctx.translate(pt.x,pt.y);
            var factor = Math.pow(scaleFactor,clicks);
            ctx.scale(factor,factor);
            ctx.translate(-pt.x,-pt.y);
            redraw();
        }

        var handleScroll = function(evt){
            var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
            if (delta) zoom(delta);
            return evt.preventDefault() && false;
        };
        canvas.addEventListener('DOMMouseScroll',handleScroll,false);
        canvas.addEventListener('mousewheel',handleScroll,false);
    };
    gkhead.src = 'marton.jpg';
    //console.log(gkhead);//img src
    ball.src   = 'http://phrogz.net/tmp/alphaball.png';
    //console.log(ball);

    // Adds ctx.getTransform() - returns an SVGMatrix
    // Adds ctx.transformedPoint(x,y) - returns an SVGPoint
    function trackTransforms(ctx){
        var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
        var xform = svg.createSVGMatrix();
        ctx.getTransform = function(){ return xform; };

        var savedTransforms = [];
        var save = ctx.save;
        ctx.save = function(){
            savedTransforms.push(xform.translate(0,0));
            return save.call(ctx);
        };
        var restore = ctx.restore;
        ctx.restore = function(){
            xform = savedTransforms.pop();
            return restore.call(ctx);
        };

        var scale = ctx.scale;
        ctx.scale = function(sx,sy){
            xform = xform.scaleNonUniform(sx,sy);
            return scale.call(ctx,sx,sy);
        };
        var rotate = ctx.rotate;
        ctx.rotate = function(radians){
            xform = xform.rotate(radians*180/Math.PI);
            return rotate.call(ctx,radians);
        };
        var translate = ctx.translate;
        ctx.translate = function(dx,dy){
            xform = xform.translate(dx,dy);
            return translate.call(ctx,dx,dy);
        };
        var transform = ctx.transform;
        ctx.transform = function(a,b,c,d,e,f){
            var m2 = svg.createSVGMatrix();
            m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
            xform = xform.multiply(m2);
            return transform.call(ctx,a,b,c,d,e,f);
        };
        var setTransform = ctx.setTransform;
        ctx.setTransform = function(a,b,c,d,e,f){
            xform.a = a;
            xform.b = b;
            xform.c = c;
            xform.d = d;
            xform.e = e;
            xform.f = f;
            return setTransform.call(ctx,a,b,c,d,e,f);
        };
        var pt  = svg.createSVGPoint();
        ctx.transformedPoint = function(x,y){
            pt.x=x; pt.y=y;
            return pt.matrixTransform(xform.inverse());
        }
    }
</script>

</body>

</html>

最佳答案

所以，我设法编写了代码:

<!DOCTYPE html>
<!-- saved from url=(0048)http://phrogz.net/tmp/canvas_zoom_to_cursor.html -->
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Zooming via HTML5 Canvas Context</title>
</head><body style="-webkit-user-select: none;">

<canvas width="800" height="600"></canvas>

<script type="text/javascript" charset="utf-8">
    var canvas = document.getElementsByTagName('canvas')[0];
    canvas.width = 800; canvas.height = 600;
    var gkhead = new Image;
    var ball   = new Image;

    var square_size = 10;

    window.onload = function(){
        var ctx = canvas.getContext('2d');
        trackTransforms(ctx);
        function redraw(){
            // Clear the entire canvas
            var p1 = ctx.transformedPoint(0,0);
            var p2 = ctx.transformedPoint(canvas.width,canvas.height);
            ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);

            ctx.drawImage(gkhead,50,50);//punct stanga sus imagine cu marton
    //console.log(ctx);
            color='ff0000';
    w = gkhead.width;
    //console.log(w);
    h = gkhead.height;
    //console.log(h);
            var i = 0;
            i = i + 1;
            if(i==1)color='ff0000';
            if(i==2)color='00ff00';
            if(i==3){
    color='0000ff';
    i=0;
    }

            ctx.beginPath();
            ctx.rect(50,50,gkhead.width,gkhead.height);
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#" + color;
            ctx.stroke();

            var ind = 0;
            for(var j = 0; j < gkhead.width - square_size; j = j + square_size){
                ind++;
                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.strokeStyle = 'black';
                ctx.moveTo(50 + ( ind * square_size ), 50);
                ctx.lineTo(50 + ( ind * square_size ), 50 + gkhead.height);
                ctx.stroke();
            }

            var ind = 0;
            for(var j = 0; j < gkhead.height - square_size; j = j + square_size){
                ind++;
                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.strokeStyle = 'black';
                ctx.moveTo(50, 50 + ( ind * square_size ));
                ctx.lineTo(50 + gkhead.width,50 + ( ind * square_size ));
                ctx.stroke();
            }

            ctx.save();
            ctx.translate(438.5,223);
            ctx.strokeStyle = '#06c';
            ctx.beginPath();
            ctx.lineWidth = 0.05;

            for (var i=0;i<60;++i){
                ctx.rotate(6*i*Math.PI/180);
                ctx.moveTo(9,0);
                ctx.lineTo(10,0);
                ctx.rotate(-6*i*Math.PI/180);
            }
            ctx.stroke();
            ctx.restore();
        }
        redraw();

        var lastX=canvas.width/2, lastY=canvas.height/2;
        var dragStart,dragged;

        canvas.addEventListener('mousedown',function(evt){
            document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
            console.log(lastX + ' ' + lastY);
            dragStart = ctx.transformedPoint(lastX,lastY);
            dragged = false;
        },false);

        canvas.addEventListener('mousemove',function(evt){
            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
            dragged = true;
            if (dragStart){
                var pt = ctx.transformedPoint(lastX,lastY);
                ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
                redraw();
            }
        },false);

        canvas.addEventListener('mouseup',function(evt){
            dragStart = null;
            if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
        },false);

        var scaleFactor = 1.1;
        var zoom = function(clicks){
            var pt = ctx.transformedPoint(lastX,lastY);
            ctx.translate(pt.x,pt.y);
            var factor = Math.pow(scaleFactor,clicks);
            ctx.scale(factor,factor);
            ctx.translate(-pt.x,-pt.y);
            redraw();
        }

        var handleScroll = function(evt){
            var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
            if (delta) zoom(delta);
            return evt.preventDefault() && false;
        };
        canvas.addEventListener('DOMMouseScroll',handleScroll,false);
        canvas.addEventListener('mousewheel',handleScroll,false);
    };
    gkhead.src = 'http://www.william.ro/wp-content/uploads/2013/07/13.jpg';
    //console.log(gkhead.width);
    //console.log(gkhead);//img src
    ball.src   = 'http://phrogz.net/tmp/alphaball.png';
    //console.log(ball);

    // Adds ctx.getTransform() - returns an SVGMatrix
    // Adds ctx.transformedPoint(x,y) - returns an SVGPoint
    function trackTransforms(ctx){
        var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
        var xform = svg.createSVGMatrix();
        ctx.getTransform = function(){ return xform; };

        var savedTransforms = [];
        var save = ctx.save;
        ctx.save = function(){
            savedTransforms.push(xform.translate(0,0));
            return save.call(ctx);
        };
        var restore = ctx.restore;
        ctx.restore = function(){
            xform = savedTransforms.pop();
            return restore.call(ctx);
        };

        var scale = ctx.scale;
        ctx.scale = function(sx,sy){
            xform = xform.scaleNonUniform(sx,sy);
            return scale.call(ctx,sx,sy);
        };
        var rotate = ctx.rotate;
        ctx.rotate = function(radians){
            xform = xform.rotate(radians*180/Math.PI);
            return rotate.call(ctx,radians);
        };
        var translate = ctx.translate;
        ctx.translate = function(dx,dy){
            xform = xform.translate(dx,dy);
            return translate.call(ctx,dx,dy);
        };
        var transform = ctx.transform;
        ctx.transform = function(a,b,c,d,e,f){
            var m2 = svg.createSVGMatrix();
            m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
            xform = xform.multiply(m2);
            return transform.call(ctx,a,b,c,d,e,f);
        };
        var setTransform = ctx.setTransform;
        ctx.setTransform = function(a,b,c,d,e,f){
            xform.a = a;
            xform.b = b;
            xform.c = c;
            xform.d = d;
            xform.e = e;
            xform.f = f;
            return setTransform.call(ctx,a,b,c,d,e,f);
        };
        var pt  = svg.createSVGPoint();
        ctx.transformedPoint = function(x,y){
            pt.x=x; pt.y=y;
            return pt.matrixTransform(xform.inverse());
        }
    }
</script>

</body>

</html>

关于javascript - 通过 HTML5 Canvas Context 缩放并在给定图像上绘制网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18823571/

文章推荐： c# - 用于 C# 的 Rally 回溯 API

文章推荐： javascript - 如何在 Javascript 中写双引号

文章推荐： c# - 异步生产者/消费者

文章推荐： javascript - Masonry 3.1.2 前置/附加

java - and 之间的区别
大家好，我看到了来自 java 项目中的 jsp 页面。想问一下这些html标签有什么区别。请多多指教。示例代码如下: 最佳答案使用struts-html标签库，其中只是普
html - HTML 页面中损坏的 HTML
我有一个页面，我正在从电子邮件中读取 HTML。有时，来自电子邮件的文本包含 HTML 和 CSS，它完全改变了我的页面样式。我不希望我的页面样式因此受到影响。我如何严格阅读特定 div(框)内的
html - HTML 中的图像 - HTML 表中行之间的间距
我知道有类似的问题，但我想对我的特定代码进行一些输入。我有一个图像，我将其切成 9 块，并创建了一个 3x3 HTML 表来显示它。但是我的表在行之间有空格，但在列之间没有空格。我没有使用任何 C
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 如何解析和规范化来自不同 HTML 生成器的 HTML？
这是 question 的扩展.我正在尝试解析嵌入在 Blogger 博客的 XML 备份中的 HTML 片段，并用 InDesign 标签重新标记它们。 Blogger 并未对其任何帖子的 HTML
html - html 元素之间的换行符破坏了 html 布局
我知道在 html 中元素之间的换行符被视为空格，但我认为当您尝试使用响应式布局时这非常可怕。例如，这里我们有预期和正确的行为，但要获得它，我必须删除元素之间的 html 中的换行符: https:
html - 将带有 html 标签的文本显示为 html
我正在尝试将文本文件显示为 html。我正在使用 ionic 。我正在发送一个 html 格式的响应，但在一个文本文件中发送到配置文件页面。它在 .ts 页面的变量名中。 @Component({
html - 如何在 html 中显示 html？
假设我有一个 html 文档: test 我想在浏览器中显示该代码。然后我会创建类似的东西: <html>test<html> 为了在中间制作 gubbins，我有一个函数
html - HTML 元素和 HTML 标签有什么区别？
HTML 元素和 HTML 标签有什么区别？渲染有什么区别吗？使用标签或元素时有什么特殊注意事项吗？最佳答案是一个标签，特别是一个开始标签也是一个标签，一个结束标签 This is a para
html - 降低 html 表格高度和过度滚动 - HTML
我有这个表格的模态形式。该表正在填充大量数据，但我不想分页。相反，我想以模式形式降低表格的高度并为表格添加溢出。下面是我的代码，但它不起作用。请问我该如何实现？ CSS #table{
html - 查看 HTML 代码而不是呈现的 HTML
我记得有一个 Linux 命令可以从给定的 URL 返回 HTML 代码。您可以将 URL 作为此命令的参数，然后返回 HTML 代码，而不是在浏览器中输入 URL。哪个命令执行此操作？最佳答案
html - 在 html 中显示 html
我有一个 html 页面，我想在其中包含另一个有很多链接的 html 页面。我能够使用 iframe 实现它，但我希望 iframe 内的页面具有与原始页面相同的文本和链接颜色属性，我不想要滚动条，我
html - 如何从另一个 HTML 加载部分 HTML？
我正在使用 HTML 写一本书。如果我把它写在一个 html 文件中，整个代码就会变长，所以我想将每一章保存到不同的文件中，然后将它们加载到主 html 中。我的意思是有像 chapter1.html
html - 将 html 页面重定向到另一个 html
在显示之前，我必须将一个网站重定向到另一个网站。我试过使用 .htaccess，但它给我带来了问题。我也使用过 javavscript 和 meta，但在加载我要从中传输的页面之前它不起作用。帮助？
html - 将网页 html 转换为电子邮件 html
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 7 年前。
html - 使用 html 打印 ""
如何打印“html”标签，包括“”？如何在不使用文本区域和 Javascript 的情况下对任何标签执行此操作？最佳答案使用HTML character references : <html
html - 如何将 html.slim 文件转换为 html 或 html.erb？
我需要将 Ruby on Rails 应用程序中的 html.slim 文件转换为 html.erb。有什么简单的方法吗？我尝试了 Stack Overflow 和其他网站中列出的许多选项。但对我没有
html - 没有标签可以创建 HTML 文档吗？
这个问题在这里已经有了答案: Is it necessary to write HEAD, BODY and HTML tags? (6 个答案) 关闭 8 年前。我在 gitHub 上找到了这个
html - 什么是加载外部资源的 HTML 元素列表？ (HTML 电子邮件)
如果不允许通过 JavaScript 进行额外的 DOM 操作，我正在寻找可以加载外部资源的元素列表。我正在尝试使用 HTML 查看器托管来自第三方的电子邮件，当发生这种情况时，我需要删除任何自动加载

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 通过 HTML5 Canvas Context 缩放并在给定图像上绘制网格