用HTML5和原生js实现放大局部图片

最新推荐文章于 2024-01-25 12:27:20 发布

weixin_30713953

最新推荐文章于 2024-01-25 12:27:20 发布

阅读量389

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huyuzhu/p/6545219.html

版权

drawImage方法

context.drawImage(image,sx,sy,sh,dx,dy,dw,dh)

sx\sy起始图像的横纵坐标，sh\sd起始图像的大小，dx\dy复制图像的横纵坐标，dw\dy复制图像的大小

下面我们用这个属性来做一个点击局部放大效果

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        var context;
        var canvas;
        var iMouseX, iMouseY = 1;
        var image;
       //绘制区域
        window.onload = function() {
            
            function draw(id){
                canvas = document.getElementById(id);
                if(canvas == null)
                    return false;
                context = canvas.getContext('2d');
                context.fillStyle = "#eeeeff";
                context.fillRect(0,0,400,300);
                //一边装载，一边绘制
                image = new Image();
                image.src = "img/2.png";
                image.onload = function() {
                    drawImg(context,image);
                };
            }
            //将原始图片添加到网页上
            function drawImg(context,image) {
                        context.drawImage(image,0,0,100,100);
            }
            draw('canvas');

        
         //点击原始图片放大事件 
        canvas.onclick = function(e) {//监听鼠标动作
           iMouseX = Math.floor(e.pageX);  
           iMouseY = Math.floor(e.pageY)-82;  
           context.drawImage(image,iMouseX,iMouseY,57,80,110,0,200,200);
        }
        }        
    </script>
</head>
<body>
    <h1>canvas元素示例</h1>
    <canvas id="canvas" width="400" height="300" ></canvas>
</body>
</html>

转载于:https://www.cnblogs.com/huyuzhu/p/6545219.html

weixin_30713953

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用HTML5和原生js实现放大局部图片

drawImage方法context.drawImage(image,sx,sy,sh,dx,dy,dw,dh)sx\sy起始图像的横纵坐标，sh\sd起始图像的大小，dx\dy复制图像的横纵坐标，dw\dy复制图像的大小下面我们用这个属性来做一个点击局部放大效果<!DOCTYPE html><html><head> <title&gt...
复制链接

扫一扫