Heim > Web-Frontend > H5-Tutorial > Hauptteil

HTML5 canvas (二)

WBOY
Freigeben: 2016-05-17 09:09:19
Original
2063 Leute haben es durchsucht
绘制图片主要有这三种方式,从下图能很清楚的知道各个参数的作用
  • 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],
  •     ];



Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!