最近使用 HTML 5 中的 Canvas 写了一个简单的拼图游戏，在这个过程中遇到了不少问题，经过搜索也一一解决了，现在做一个记录方便日后再次遇到时查阅。

• 在 Canvas 中绘制圆角图片

  代码很简单，核心代码就一个函数：

    function roundedImage(img, x, y, width, height, radius) {
        ctx.save();
  
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
  
        ctx.clip();
  
        ctx.drawImage(img, x, y, width, height);
  
        ctx.restore();
    }
  

• 调整图片尺寸

  在游戏开发过程中，需要根据窗口尺寸大小调整图片的尺寸，否则图片会显示不完整。这在传统桌面程序中是很简单的事情，但使用 Canvas 还是费了一番周折。

  最后的解决方案很简单，可能比桌面程序还要简单，核心就使用了一个方法：createImageBitmap。

    function resizeImage(img, width, height, callback) {
        createImageBitmap(img, {
            resizeWidth: width,
            resizeHeight: height
        }).then(function (sprite) {
            callback(sprite);
        });
    }