html - Cutting an Image into pieces through Javascript -
html - Cutting an Image into pieces through Javascript -
i creating simple jigsaw puzzle. in order this, need cutting image using 20 pieces. there way in javascript cutting image 20 equal pieces , save them 20 different objects within webpage? or have go photoshop , cutting each image out myself , phone call in?
you can setting image background on div, setting background-position. same using css sprites.
(assume pieces 100 x 100px)
<div class="puzzle piece1"></div> <div class="puzzle piece2"></div>
css:
.puzzle { background-image:url(/images/puzzle.jpg); width:100px; height:100px; } .piece1 { background-position:0 0 } .piece2 { background-position:-100px -100px }
javascript html html5
Comments
Post a Comment