CANVAS drawImage 绘图图片模糊已解决

CANVAS drawImage 绘图图片模糊解决

不可以在CSS中定死canvas画布的长宽，
在绘图时给出canvas宽高
具体JS代码：
const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);

      // 使用可选大小的图像
      const image = new Image(); // Using optional size for image
      // 绘制图片
      image.onload = drawImageActualSize; // Draw when image has loaded


      image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';

      function drawImageActualSize() {
        // 使用图像的内在大小在CSS像素的画布元素
     


        // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!:画布给宽，高（不能写在CSS里面）
        //   ctx.drawImage(this, 0, 0, 770, 666);  （第四五个参数和画布的宽高一致！！！！！）
        canvas.width = 770;
       
        canvas.height = 666;
     

    
        // 将图像绘制为300x227，忽略自定义尺寸60x45
        // 在构造函数中给出
        // ctx.drawImage(this, 0, 0);

        // 要使用自定义大小，我们必须指定缩放参数
        // 使用元素的宽度和高度属性-让我们画一个
        // 在角落的顶部:
        // on top in the corner:
        ctx.drawImage(this, 0, 0, 770, 666);
      }