您的位置：首页 > 其它

canvas控制图片缩放

2015-08-25 15:22 447 查看

例子：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<meta name="format-detection" content="telephone=no, email=no, adress=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-touch-fullscreen" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

</head>

<body>

<canvas id="canvas" style="border:1px solid blue;">

   您的浏览器不支持canvas

</canvas></br>

<input type="range" id="slider" value="1" max="3" min="0.5" step="0.01" style="width:598px;" />

<script>

    var canvas = document.getElementById("canvas");

    var context = canvas.getContext("2d");

    var image = new Image();

    var slider = document.getElementById("slider");

    window.onload = function() {

        canvas.width = 598;

        canvas.height = 397;

        image.src = "picture_01.jpg";

        image.onload = function(){

            drawImageByScale();

            slider.onmousemove = function(){

                var scale = slider.value;

                drawImageByScale(scale);

            };

        }

    };

    function drawImageByScale(scale){

        var scale = scale || 1;

        var imageWidth = 598 * scale;

        var imageHeight = 397 * scale;

        var dx = (canvas.width - imageWidth)/2;

        var dy = (canvas.height - imageHeight)/2;

        context.clearRect(0,0,canvas.width,canvas.height);

        context.drawImage(image,dx,dy,imageWidth,imageHeight);

    }

</script>

</body>

</html>

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

参数分别表示：图片对象，从图片的X轴处，从图片的Y轴处，裁剪的宽度，裁剪的高度，从canvas的X轴处，从canvas的Y轴处，绘制的宽度，绘制的高度

如果省略第2-5个参数，默认不裁剪，按照图片实际大小绘制

注意：drawImage()函数务必写在image.onload = function(){}中

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航