以下為 HTML5 Canvas 繪製影像
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
window.onload=function()
{
// 取得 Canvas 元素
var c=document.getElementById("myCanvas");
// 建立繪製物件
var ctx=c.getContext("2d");
// 建立影像物件
var img=new Image();
// 指定影像來源
img.src="img_flwr.png";
// 繪製影像 參數依序為 影像物件, x, y
ctx.drawImage(img,0,0);
}
</script>
</body>
</html>
結果如下
文章標籤
全站熱搜
Technology (30)