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

来源：互联网发布：北京网络推广软件编辑：程序博客网时间：2024/06/07 19:02

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

在上面的演示,我只使用一个上下文方法,“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 onclick="draw_dragon();return true;">Draw Dragon</button><button onclick="draw_smaller_dragon();return true;">Draw smaller dragon</button><button onclick="draw_dragon_head();return true;">Draw Dragon Head</button><button onclick="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>

0 0