html5画布的一些应用，感觉还是挺不错的，呵呵！

画线或简单的形状很无聊,让我们画一些图片!

在上面的演示,我只使用一个上下文方法,“drawImage()”。然而,“drawImage”方法可以有3、5、9参数。我有三个功能是“draw_dragon()”、“draw_smaller_dragon()”和“draw_dragon_head()”,他们每个人都实现了3、5和9分别论证。

下面是代码啦：

<div"><canvas id="c5" width="600" height = "300" style="border:solid 1px #000000;"></canvas>
<div>
<button οnclick="draw_dragon();return true;">Draw Dragon</button>
<button οnclick="draw_smaller_dragon();return true;">Draw smaller dragon</button>
<button οnclick="draw_dragon_head();return true;">Draw Dragon Head</button>
<button οnclick="Clear_image();return true;">Erase Everything</button>
</div> 
</div>

<script>
var c5 = document.getElementById("c5");
var c5_context = c5.getContext("2d");

var dragon = new Image();
dragon.src = 'images/chinese_dragon.png';

function draw_dragon() {
c5_context.drawImage(dragon, 100, 5);
}

function draw_smaller_dragon() {
c5_context.drawImage(dragon, 10, 5, 58, 100);
}

function draw_dragon_head() {
c5_context.drawImage(dragon, 0, 19, 69, 97, 300, 100, 103, 145);
}

function Clear_image() {
c5_context.clearRect(1, 1, 600, 300);
} 
</script>