Kanvas melukis gambar
Melukis gambar dengan Kanvas hendaklah menjadi salah satu ciri atau sorotannya. Sudah tentu, dengan API Fail, JS menjadi tiada tandingan. Seterusnya, saya akan menunjukkan kepada anda cara melukis gambar dan mencipta kesan tiga dimensi.
Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="http://img2.imgtn.bdimg.com/it/u=1901619824,975274476&fm=21&gp=0.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標簽。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>
