HTML5
この間、shcoo のオンライン授業でHTML5について少し学んだ。へーこんなことがこんな簡単にできるんだーという驚き。
下のはただの画像ですが、その下のコードをコピペしてプレビューしてみたら確認できます。クリックするとハートがクルンと回ります。それに水色部分の「ナナメ」にもびっくり。ナナメね〜。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Hello my JS!</title>
<style>
*{margin:0;padding:0;text-align:center;}
#canvas{border:1px solid gray;}
/*入力したCSS*/
#mymsg{
position:absolute;
width:100%;
top:160px;
text-align:center; /*★1*/
text-shadow:2px 2px 2px #aaa; /*★2*/
z-index:1;
}
#title{
position:absolute;
left:-45px;top:40px; /*★3*/
border:1px solid gray; /*★4*/
background-color:skyblue; /*★5*/
box-shadow:1px 1px 2px gray; /*★6*/
text-shadow:-1px -1px 1px white; /*★7*/
transform:rotate(-40deg); /*★8*/
text-align:center;
font-size:20px;
line-height:2em;
width:240px;
z-index:1;
}
#mywrap{
border:1px solid gray;
width:250px;
margin:10px auto;
position:relative;
overflow:hidden; /*★9*/
box-shadow:10px 10px 2px gray; /*★10*/
}
p{font-size:18px;}
#mycanvas{
transition:transform 1s ease;
}
/*入力したCSS ここまで*/
</style>
</head>
<body>
<!-- ↓入力したHTML -->
<div id="mywrap">
<h1 id="title">♡HBD♡HBD♡HBD♡HBD♡</h1>
<p id="mymsg" onclick="myrotate();">♡ハートの先端をクリック♡</p>
<canvas id="mycanvas" width="250" height="250">
</canvas>
</div>
<!-- 入力したHTML ここまで -->
<script>
// ↓ここから入力したJavaScript-----------------------
var mycanvas=document.getElementById("mycanvas");
var ctx=mycanvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,125); //★11
ctx.lineTo(125,150); //★12
ctx.lineTo(150,125); //★13
ctx.lineWidth=50; //★14
ctx.lineCap="round"; //★15
ctx.strokeStyle="pink";
ctx.stroke();
var d=360;
function myrotate(){
document.getElementById("mycanvas").style.transform="rotate("+d+"deg)";
d=(d==0)?360:0;
}
// ↑ここまでが入力したソース-----------------------
</script>
</body>
</html>
