Cavas.drawImage图片拉伸问题

canvas在和jq.width()设置宽高的时候会出现拉伸情况。

产生拉伸的方式

能产生拉伸的还有行间style样式也会产生变形拉伸 canvas.style.width = "1000px";也会产生变形 百分比也会产生变形

不会拉伸的方式

直接写width，height不会产生变形 $('#myCanvas').attr('width',width)

代码语言：javascript复制

   <img id='source' src="https://img.lookcss.com/posters.jpg" style="display: none;" />
    <canvas id="myCanvas">
    </canvas>
<button class="btn" style="padding:20px">生成海报</button>
<script>
       $(function () {
   var w = $(window).width()
   var h = $(window).height()
   var cvs = document.getElementById('myCanvas');
   var ctx = cvs.getContext('2d')
    $('#myCanvas').width(w)
    $('#myCanvas').height(h)
        var imgPath = document.getElementById('source');
        ctx.drawImage(imgPath, 0, 0, 445, 790, 0, 0, 445, 790) 
//这样的canvas会出现拉伸情况

   $(".btn ").click(function () {       
                $('#myCanvas').attr('width', w-10)
            $('#myCanvas').attr('height', h-10)        
//使用attr或者canvas直接指定宽高的话不会出现问题
                ctx.drawImage(imgPath, 0, 0, 445, 790, 0, 0, 445, 790)          
        });

)}
</script>

canvas

0 人点赞