-
CANVAS 연습4(이미지 반복)게임/HTML 연습 2018. 6. 24. 16:52반응형<!DOCTYPE html><html><head><meta charset = "UTF-8"><title>CANVAS 연습4</title></head><body><canvas id="myCanvas" width="800" height="600" style="border: 1px dotted blue"></canvas><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var flower = new Image(); //이미지 함수 선언flower.src = "images/flower_s.jpg"; //이미지 소스의 위치 지정flower.onload = function() { //이미지 로드var pattern = ctx.createPattern(flower, "repeat"); //패턴으로 채운다.//context.createPattern(image(이미지 소스 넘긴다.), "repeat/repeat-x/repeat-y/no-repeat");// repeat: 패턴을 반복해서 채움, repeat-x: x축으로 반복, repeat-y: y축으로 반복, no-repeat: 반복하지 않는다.ctx.fillStyle = pattern;ctx.fillRect(0,0, 800, 600);};</script></body></html>
-> images/flower_s.jpg
크기: 100px * 100px
결과:
반응형'게임 > HTML 연습' 카테고리의 다른 글
CANVAS 연습6(글씨 쓰기) (0) 2018.06.25 CANVAS 연습5(이미지 그리기) (0) 2018.06.25 CANVAS 연습3(그라데이션) (0) 2018.06.23 CANVAS 연습2(사각형, 원) (0) 2018.06.22 CANVAS 연습1(선 그리기) (0) 2018.06.21
