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中文网</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>
bahagian seterusnya