[mw_shl_code=CSS, 참] <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>마트릭스</title>
<style>
몸체 {
마진: 0;
패딩: 0;
배경색: #000;
오버플로우: 숨겨짐;
색상:#e6922a;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<스크립트 유형="text/javascript">
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
var fontSize = 12,
listText = "abcdefghijklmnopqrstuvwxyz ".split(""),
열, 행,
listColumn = [];
함수 draw() {
그림 배경
context.fillStyle = "rgba(0, 0, 0, 0.05)";
context.fillRect(0, 0, canvas.width, canvas.height);
context.save();
로고를 그리세요
context.shadowColor = "#074425";
context.shadowBlur = parseInt(Math.random() * 40 + 1);
context.font = "굵은 36px Arial";
context.fillStyle = "#eefbf5";
context.fillText("ITSVSE.COM", (canvas.width / 2 - context.measureText("ITSVSE.COM").width / 2), canvas.height - 200);
context.fillText("Wusoft Forum", (canvas.width / 2 - context.measureText("Wusoft Forum").width / 2), canvas.height - 165);
context.font = "16px Microsoft Yahei";
context.fillText("매트릭스: 매트릭스 혁명", (canvas.width / 2 - context.measureText("매트릭스: 매트릭스 혁명").width / 2), canvas.height - 100);
드로우 코드
context.restore();
context.font = "normal" + fontSize + "px Arial";
context.fillStyle = "#12ee46";
(var i = 0; 저는 칼럼<; i++) {
만약 (Math.random() > 0.5) {
var str = listText[parseInt(Math.random() * listText.length)];
context.fillText(str, i * fontSize, listColumn* fontSize);
목록 칼럼+= 1;
만약 (listColumn>= 행) {
목록 칼럼= 0;
}
}
}
}
function resize() {
canvas.width = window.innerWidth - 3;
canvas.height = window.innerHeight - 3;
column = canvas.width / fontSize,
행 = canvas.height / fontSize;
(var i = 0; 저는 칼럼<; i++) {
목록 칼럼= 1;
}
}
window.addEventListener("resize", resize);
canvas.addEventListener("mousedown", function () {
clearInterval(타이머);
타이머 = setInterval(드로우, 20);
});
canvas.addEventListener("mouseup", function () {
clearInterval(타이머);
타이머 = setInterval(드로우, 40);
});
resize();
var 타이머 = setInterval(draw, 40);
</script>
</body>
[/</html>mw_shl_code]
|
게시됨 2014. 11. 14. 오후 6:28:00
|
|
|
|
게시됨 2014. 11. 14. 오후 6:32:02
|
