【Web前端问题】为什么在canvas上画图片比设置的尺寸大很多？

原图大小：750x1334
canvas大小: 750X1334
我要在750x1334的画布上，铺一个750x1334的图片作为背景。

代码如下：

 var image = new Image()
  image.src = '/img/background.png'
  image.onload = drawImg // 图片加载完成再执行
  function drawImg () {
context.drawImage(image, 0, 0, 750, 1334)
  }

canvas:

<canvas id='share' canvas-id='share' style='width:750px;height:1334px;'>
</canvas>

结果效果出来是这样的，左图为canvas，右图为这个原图的img作为比对，750x1334，也就是我最后想要画出来的效果
图片描述

图片拉伸了非常多，这是为什么？

回答：

<canvas id='share' canvas-id='share' width="750" height="1334" style='width:750px;height:1334px;'>
</canvas>

canvas 的大小不是通过 style 设置的，这两个宽高是两码事。

回答：

看你说750x1334 应该是为了H5绘图，如果加上你的动态适配，在浏览器以模拟手机窗口打开，是一个绘制好的图片
但是你canvas标签本身是一个画布，我之前做了一个微信分享，前端绘图，我把代码贴给你，希望对你有帮助

var canvas = document.createElement('canvas');
        canvas.width = 750;
        canvas.height = 1206;
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.onload = function () {
            var img_left = new Image();
            img_left.onload = function () {
                var img_ewm = new Image();
                img_ewm.onload=function(){
                    ctx.font = "24px 黑体";
                ctx.drawImage(img, 0, 0);
                ctx.drawImage(img_left, 310, 160, 115, 115);
                ctx.drawImage(img_ewm, 310, 925, 115, 115);
                ctx.fillStyle = "#773f15";
                ctx.textAlign = 'center';
                ctx.fillText('??', 375, 138);
                //$('body').html(canvas);
                $('.imageShare').attr('src', canvas.toDataURL("image/jpeg"))
                }
                img_ewm.src='./ewm.png';
                img_ewm.crossOrigin = 'anonymous';
            }
            img_left.src = "./132.jpeg"
            img_left.crossOrigin = "anonymous";
        }
        img.src = './result2.jpg';
        img.crossOrigin = "anonymous";

注意 canvas 绘图，图片会有跨域问题，导致不能生成图片，所以需要配置同源

以上是 【Web前端问题】为什么在canvas上画图片比设置的尺寸大很多？ 的全部内容， 来源链接： utcz.com/a/137749.html

回到顶部