CANVAS 연습16(save() && restore())

게임/HTML 연습 2018. 7. 3. 23:37

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "red";

ctx.save(); //속성 저장

ctx.fillRect(50, 100, 100, 100);

ctx.strokeRect(50, 100, 100, 100);

ctx.fillStyle = "black";

ctx.font = "28px black";

ctx.fillText("1. red", 60, 160);

ctx.fillStyle = "blue";

ctx.fillRect(300, 100, 100, 100);

ctx.strokeRect(300, 100, 100, 100);

ctx.fillStyle = "black";

ctx.font = "28px black";

ctx.fillText("2. blue", 305, 160);

ctx.restore(); //저장한 속성 불러옴

ctx.fillRect(50, 300, 100, 100); //파란색이 아니라 빨간색이다.

ctx.strokeRect(50, 300, 100, 100);

ctx.fillStyle = "black";

ctx.font = "28px black";

ctx.fillText("3. blue", 60, 360);

</script>

</body>

</html>

결과 :

CANVAS 연습18(캐릭터 멈춤 && 점프) (0)	2018.07.09
CANVAS 연습17(마우스 커서 좌표) (0)	2018.07.04
CANVAS 연습15(공 던지기 게임) (0)	2018.07.03
CANVAS 연습14_3(사람 움직임 && 멈춤) (1)	2018.07.01
CANVAS 연습14_2(배경 움직이기 && 키보드를 눌렀을 때 사람 움직임) (0)	2018.07.01

SHstation SHstation