canvas drag 實現(xiàn)拖拽拼圖小游戲

博主一直心心念念想做一個小游戲～  前端時間終于做了一個小游戲，直到現(xiàn)在才來總結，哈哈～ 以后要勤奮點更新博客！

 

實現(xiàn)原理

1.如何切圖？

用之前的方法就是使用photoshop將圖片切成相應大小的圖片。這種做法不靈活，如果要更換圖片的話，就得重新去切圖，很麻煩。

現(xiàn)在是使用canvas，圖片是一整張jpg或者png，把圖片導入到canvas畫布，然后再調(diào)用上下文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++) { 
        		
延伸閱讀
        		

        			
        			
ssh框架
        			2016-09-30
        			
        			
        			
        			
阿里移動安全 [無線安全]玩轉無線電——不安全的藍牙鎖
        			2017-07-26
        			
        			
        			
        			
消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe
        			2024-03-26
        			
        			
        			
        			
Selective Search for Object Recognition 論文筆記【圖片目標分割】
        			2017-07-26
        			
        			
        			
        			
詞向量-LRWE模型-更好地識別反義詞同義詞
        			2017-07-26
        			
        			
        			
        			
從棧不平衡問題 理解 calling convention
        			2017-07-26
        			
        			
        			
        			
php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
        			2017-07-26
        			
        			
        			
        			
Swift實現(xiàn)JSON轉Model - HandyJSON使用講解
        			2017-07-26
        			
        			
        			
        			
阿里移動安全 Android端惡意鎖屏勒索應用分析
        			2017-07-26
        			
        			
        			
        			
集合結合數(shù)據(jù)結構來看看(二)
        			2017-07-26
        			
        			
        			
        		
        		
        		學習是年輕人改變自己的最好方式