canvas drag 实现拖拽拼图小游戏

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

 

实现原理

1.如何切图？

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

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

renderImg: function (image) {  2 var index = 0;  3 for (var i = 0; i < 3; i++) {  4 for (var j = 0; j < 3; j++) { 
        		
网友评论
     		
				

			
			
			
		
		

更多精彩分享

学习是年轻人改变自己的最好方式