Rumah > hujung hadapan web > Tutorial H5 > HTML5 canvas (二)

HTML5 canvas (二)

WBOY
Lepaskan: 2016-05-17 09:09:19
asal
2092 orang telah melayarinya
绘制图片主要有这三种方式,从下图能很清楚的知道各个参数的作用
  • drawImage(image,dx,dy)
  • drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
  • drawImage(image,dx,dy,dw,dh)
    其中的 image 参数可以是 HTMLImageElement(img标签的元素)、HTMLCanvasElement (canvas标签的元素)和HTMLVideoElement(video的元素) 中的任一个对象。

下面以坦克大战的地图来示意怎么使用 ,其中资源图片为右图  

先上基本结构,上节有讲过
  •        你的浏览器不支持canvas!
  • <script></script>
  •     var myCanvas = document.getElementById("myCanvas");
  •     var context =  myCanvas.getContext("2d");




然后创建一个图片
  • var mapImg =new Image();//创建一个图片
  • mapImg.src = "http://www.w3cfuns.com/data/attachment/forum/201107/26/194717f9ijaam199j9jvkv.png"//坦克地图的图片地址,它的宽为64,高为16。




然后就可以画图了

  • context.drawImage(mapImg);     //在坐标0,0处画图,宽高为图片本身的宽高
  • context.drawImage(mapImg, 100, 100);  //在坐标100, 100处画图,宽高为图片本身的宽高
  • context.drawImage(mapImg, 100, 200, 640, 233);  //在坐标100, 200处画图,宽 640,高 233
  • context.drawImage(mapImg, 16, 0, 16, 16, 200, 100, 64, 64);//在坐标200,100处画图,宽64,高64,图内容为
  • 距原图左边16,上边0的一个大小为16,16的截图



自己可以试验下[html]

       你的浏览器不支持canvas!
<script><br> var myCanvas = document.getElementById("myCanvas");<br> var context = myCanvas.getContext("2d");<br> var mapImg =new Image();<br> mapImg.src = "http://www.w3cfuns.com/data/attachment/forum/201107/26/194717f9ijaam199j9jvkv.png"<br> <br> mapImg.onload = function()<br> {<br> context.drawImage(mapImg,100,100);<br> context.drawImage(mapImg,200,100,100,60);<br> context.drawImage(mapImg,16,0,16,16,100,200,64,64);<br> }<br> </script>

[/html]
然后可以试着构造坦克地图了,先定义一个画地图小方块的函数
  • function drawTile(x, y, type)//参数分别为坐标x,y,和地图的类型
  • function drawTile(x, y, type)
  •     {
  •         context.drawImage(mapImg, type * 16, 0, 16, 16, x, y, 16, 16);  //type*16为距原图左边界距离
  •     }




再试着运行下

[html]

       你的浏览器不支持canvas!
<script><br> var myCanvas = document.getElementById("myCanvas");<br> var context = myCanvas.getContext("2d");<br> var mapImg =new Image();<br> mapImg.src = "http://www.w3cfuns.com/data/attachment/forum/201107/26/194717f9ijaam199j9jvkv.png"<br> <br> function drawTile(x, y, type)<br> {<br> context.drawImage(mapImg, type * 16, 0, 16, 16, x, y, 16, 16); <br> }<br> <br> mapImg.onload = function()<br> {<br> drawTile(0, 0, 0);<br> drawTile(50, 0, 1);<br> drawTile(0, 50, 2);<br> drawTile(50, 50, 3);<br> }<br> </script>

[/html]

最后就是构造整个坦克地图了,定义地图如下,其中每个数字代表一种地图类型,0代表没有东西
  • var map =var map =
  •     [
  •             [0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,0,0],
  •             [0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,0,0],
  •             [3,3,3,3,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,3,3],
  •             [3,3,3,3,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,3,3],
  •             [3,3,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,2,2],
  •             [3,3,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0],
  •             [2,2,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0],
  •             [0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0],
  •             [0,0,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,0,0,0],
  •             [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,1,0,0,0],
  •             [4,4,0,0,0,1,0,0,2,0,0,0,2,0,0,0,1,1,1,0,0,0,0,0,0,0],
  •             [4,4,0,0,0,1,0,0,2,0,0,0,2,0,0,0,1,1,1,0,0,0,0,0,0,0],
  •             [0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,4,4,4,4],
  •             [0,0,0,0,1,1,0,0,1,1,1,0,0,0,0,1,1,1,1,0,0,0,4,4,4,4],
  •             [0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0],
  •             [0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0],
  •             [0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0],
  •             [0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0],
  •             [0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0],
  •             [0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0],
  •             [0,0,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,0,1,1,1,1,0,0,3,3],
  •             [0,0,1,1,1,1,1,1,0,0,1,1,1,1,0,0,1,1,1,1,1,1,0,0,3,3],
  •             [3,3,0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,0,0,3,3,3,3],
  •             [3,3,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,3,3,3,3],
  •             [2,2,3,3,0,0,0,0,0,0,0,1,2,2,1,0,0,0,0,0,3,3,3,3,2,2],
  •             [2,2,3,3,0,0,0,0,0,0,0,1,2,2,1,0,0,0,0,0,3,3,3,3,2,2],
  •     ];



Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan