admin 發表於 2017-2-18 16:44:43

HTML5 : canvas

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #00F;"></canvas>

<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas").getContext("2d");
myCanvas.fillStyle = "#F00";
myCanvas.fillRect(90, 20, 130, 130);
</script>畫一個長方形

admin 發表於 2017-2-18 21:58:13

置入一張圖片
<canvas id="myCanvas" width="640" height="640" style="border:1px solid #000000;"></canvas>

<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var myCVS = myCanvas.getContext("2d");

var Pic = new Image();
Pic.src = "images/tao-redd.jpg";

Pic.onload = function () {
myCVS.drawImage(Pic, 0, 0, 640, 640);
}
</script>

頁: [1]
查看完整版本: HTML5 : canvas