canvas drag 实现拖拽拼图小游戏

博主一直心心念念想做一个小游戏~  前端时间终于做了一个小游戏,直到现在才来总结,哈哈~ 以后要勤奋点更新博客!

 

实现原理

1.如何切图?

用之前的方法就是使用photoshop将图片切成相应大小的图片。这种做法不灵活,如果要更换图片的话,就得重新去切图,很麻烦。

现在是使用canvas,图片是一整张jpg或者png,把图片导入到canvas画布,然后再调用上下文context的getImageData方法,把图片处理成小图,这些小图就作为拼图的基本单位