canvas里有一张图，怎么实现鼠标可以拖动该图片移动，放大缩小旋转
点左边的矩形选框工具，在图上圈出你要处理的范围，然后按CTRL+T，接下来就可以缩放、水平翻转或垂直翻转了，鼠标箭头移动到选框的四个角，还可以旋转画面。下图为例。
绛旓細鐐瑰乏杈圭殑鐭╁舰閫夋宸ュ叿锛屽湪鍥句笂鍦堝嚭浣犺澶勭悊鐨勮寖鍥达紝鐒跺悗鎸塁TRL+T锛屾帴涓嬫潵灏卞彲浠ョ缉鏀俱佹按骞崇炕杞垨鍨傜洿缈昏浆浜嗭紝榧犳爣绠ご绉诲姩鍒伴夋鐨勫洓涓锛岃繕鍙互鏃嬭浆鐢婚潰銆備笅鍥句负渚嬨
绛旓細閭ｄ箞鎴戜滑鍦Canvas涓浣曞疄鐜拌繖涓や釜鏉′欢鍛紵濡備綍鍦1s鍐呯粯鍒60寮犲浘褰㈡垜浠彲浠ユ妸杩欒瘽鍙樺舰涓涓嬶紝灏卞彉鎴愭瘡闅1/60s灏辩粯鍒涓寮犲浘褰銆傚湪Java涓鎯冲疄鐜版瘡闅斾竴娈垫椂闂村仛涓浠朵簨鎯咃紝鎴戜滑浣跨敤鐨勬柟娉曟槸鐢ㄥ畾鏃跺櫒setinterval銆02 浠涔堟槸瀹氭椂鍣紵setinerval锛坒unction f(){}锛宼锛夛紝瀹氭椂鍣ㄥ唴閮ㄥ彲浠ヤ紶鍏ヤ袱涓弬鏁帮紝涓涓槸...
绛旓細灏辨槸璁╁畠鑳藉鐐瑰嚮路路路灏辨槸鎴戠敾浜嗗ソ澶氫釜鍥炬爣路路路鐒跺悗鍙互閫氳繃鐐瑰嚮瀹冪劧鍚庡仛绉诲姩鎴栦粈涔堢殑
绛旓細榧犳爣绉诲姩浜嬩欢锛氭牴鎹偣鍑荤殑鐪佷唤鍚嶏紝鑾峰緱鏁版嵁锛屽苟瀹炴椂閲嶇粯绉诲姩灞傜殑鐪佷唤 ('#eventCanvas').mousemove(function(ev){ var mouseX, mouseY; if(ev.layerX || ev.layerX==0){ mouseX = ev.layerX; mouseY = ev.layerY; }else if(ev.offsetX || ev.offsetX==0){ mouseX = ev...
绛旓細3銆侀洩鑺卞ぇ灏忎笉涓鑷存瘡鏈甸洩鑺卞畠浠ぇ灏忓悇鏈変笉鍚岋紝涔熷氨鎰忓懗鐫闆姳鐨勫崐寰勬槸闅忔満鐨勩傝繖涓庢垜浠幇瀹炵敓娲讳腑鐪嬪埌涓骞呴洩鑺辨弧澶╅鐨勫満鏅篃鏄竴鑷寸殑銆4銆侀洩鑺变綅缃湪绉诲姩闆姳椋樿惤锛岃嚜鐒跺畠浠殑浣嶇疆涔熷湪绉诲姩銆備簩銆佺煡璇嗙偣1銆佷娇鐢℉tml5 Canvas+JavaScript鐢诲渾鈥斺旀瀯鎴愬渾褰㈤洩鑺卞湪Html5涓紝闇瑕佷娇鐢–anvas鍚屾椂鍊熷姪JavaScript鐢诲渾...
绛旓細棣栧厛锛屼綘杩欎釜浠ｇ爜涓渶鍚庣殑setInterval("draw()", 100);搴旇鏀逛负setInterval(draw, 100);绗竴涓弬鏁板簲璇ユ槸鏂规硶鍚嶏紝铏界劧浣犻偅鏍峰啓涔熶細鏈夋晥锛屼絾寮虹儓寤鸿涓嶈閭ｄ箞鍐欍傜劧鍚庝綘璇翠綘鐨勪唬鐮佸彧鏄湪灞忓箷涓婇棯涓涓嬶紝閭ｄ箞浣犲湪鐢荤殑鏃跺欏厛璋冧竴涓媍xt.beginPath();鐢荤粨鏉熺殑鏃跺欐帀涓涓媍xt.closePaht();璇曡瘯锛岃繖涓獁3c...
绛旓細canvas涓浘鐗囩缉鏀剧鐢 璁剧疆浜嗙鐢ㄦ彃鍊笺俢anvas鏄竴娆句笟鍐呴潪甯歌憲鍚嶇殑ACD鍏徃鎺ㄥ嚭鐨勪竴娆鹃《绾х殑鐭㈤噺缁樺浘杞欢,canvas涓浘鐗囩缉鏀剧鐢ㄦ槸鍥犱负璁剧疆浜嗙鐢ㄦ彃鍊,閲嶆柊璁剧疆鍗冲彲銆俢anvas鑳藉鏃犵紳闆嗘垚鐢ㄤ簬缁樼敾銆佸浘鍍忕紪杈戝拰Web璁捐鐨勭瓑宸ュ叿,杞欢鑳藉浠ュ绉嶇殑鏍煎紡瀵煎嚭缁樼敾浣滃搧銆侸S涓璫anvas鐢诲竷缁樺埗涓浣曞疄鐜扮缉鏀撅紝浣嶇Щ锛屾棆杞 (2,...
绛旓細context 鐨 createPattern() 鏂规硶鍙互鍦ㄦ寚瀹氱殑鏂瑰悜鍐呴噸澶嶆寚瀹氱殑鍏冪礌銆傝娉曚负 context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); 銆傚亣璁鏈変竴寮犲浘鐗囷紝鎴戜滑鍙敤杩欏紶鍥剧墖鏉ュ～鍏呮鏂瑰舰锛屽浘鐗囧瓨鍌ㄤ负 girl.jpg銆傝鍥剧墖鏉ユ簮浜庣綉缁溿係teve Fulton 涓 Jeff Fulton 涓句簡涓涓浘鐗囧～鍏呯殑绀轰緥锛堝仛...
绛旓細涓嶉渶瑕佸垎鍓诧紝浣犵敾鍒canvas涓婃椂鍙鎸囧畾鍥惧儚鐨勫潗鏍囧拰楂樺灏辫浜嗭細context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):閫夊彇鍥惧儚鐨勪竴閮ㄥ垎鐭╁舰鍖哄煙杩涜缁樺埗 image:Image瀵硅薄var img=new Image(); img.src="url(...)";sx锛氬浘鍍忎笂鐨剎鍧愭爣 sy锛氬浘鍍忎笂鐨剏鍧愭爣 sw锛氱煩褰㈠尯鍩熺殑瀹藉害 sh锛氱煩褰㈠尯鍩熺殑...
绛旓細setInterval(drawImg,1);} 鑾峰彇鈥滅敾绗斺濓紝鑾峰彇鍥剧墖瀵硅薄銆傝繖閲宻etInterval寰幆鎵ц缁樺埗鍥剧墖鐨勫嚱鏁帮紝浠ュ埛鏂板浘鐗囩殑浣嶇疆锛宻etInterval鐨勯棿闅斿艰秺灏忥紝鎷栨嫿璧锋潵瓒娾滄祦鐣呪濄傚悓鏃跺埆蹇樹簡clearRect锛屽綋鍥剧墖绉诲姩鍒颁笅涓涓綅缃椂锛屾竻闄や笂涓涓綅缃殑鍥剧墖锛鍙傛暟涓Canvas鐢诲竷鐨勫潗鏍囧拰灏哄銆傚湪鎷栨嫿鏃跺皢淇鍚庣殑鍏夋爣鍧愭爣浼犵粰...
