イメージを描画する

イメージをcanvasに描画するには、drawImageメソッドを使います。

描画メソッド	内容
drawImage(image, X, Y)	(X, Y)にimageを描画
drawImage(image, X, Y, W, H)	(X, Y)にimageを指定の大きさ(Width, Height)で描画
drawImage(image, X1, Y1, W1, H1, X2, Y2, W2, H2)	image画像から座標(X1, Y1)から大きさ(W1, H1)で切り取った後、(X2, Y2)から指定の大きさ(W2, H2)にコピーして描画

マウスを乗せると描画します。

---

---

---

<canvas id="drawImage1Canvas" style="border: 1px solid;" onmouseover="drawImage1();" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawImage1() {
    var c = document.getElementById("drawImage1Canvas");
    var context = c.getContext("2d");
    var image = new Image();
    image.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif";
    image.onload = function() {
        context.drawImage(image, 10, 10, 400, 300);
    }
}
</script>

---

マウスを乗せると描画します。

---

---

---

<canvas id="drawImage2Canvas" style="border: 1px solid;" onmouseover="drawImage2();" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawImage2() {
    var c = document.getElementById("drawImage2Canvas");
    var context = c.getContext("2d");
    var image = new Image();
    image.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif";
    image.onload = function() {
        context.drawImage(image, 10, 10, 20, 30, 10, 10, 300, 400);
    }
}
</script>

---