Skip to content

zzinpan/CanvasUtil.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CanvasUtil.js

###캔버스에 간단하게 이동/확대/축소를 적용 시킵니다.

###사용방법

####1.CanvasUtil.js 불러오기

<script type="text/javascript" src="CanvasUtil.js"></script>

####2.캔버스 정의

var canvas = document.getElementById( "canvas" );
CanvasUtil.setCanvas( canvas );

####3.그리기

CanvasUtil.draw(function( canvas, ctx ){
	
	// 첫번째 함수는 transform(이동,확대,축소)을 적용합니다.
	
	ctx.fillRect( 0,0, 200,200 );
	
	//...
	
}, function( canvas, ctx ){

	// 두번째 함수는 transform(이동,확대,축소)을 적용하지 않습니다.
	
	ctx.fillRect( 0,0, 200,200 );

	//...

});

####4.이동

CanvasUtil.move( 50, 100 );

####5.확대

CanvasUtil.scaleUp();

####6.축소

CanvasUtil.scaleDown();

####7.ETC

//현재 적용된 배율값을 전달합니다.
CanvasUtil.getScale();

//적용되었던 transform을 초기화합니다.
CanvasUtil.initTransform();



####Sample - https://zzinpan.github.io/CanvasUtil.js/sample/main.html

About

CanvasUtil.js - 간단한 이동/확대/축소

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages