HTML5canvas(二)
时间:2021-07-01 10:21:17
帮助过:22人阅读
绘制图片主要有这三种方式,从下图能很清楚的知道各个参数的作用
- 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的元素) 中的任一个对象。
下面以坦克大战的地图来示意怎么使用 ,其中资源图片为右图
先上基本结构,上节有讲过
-
- var myCanvas = document.getElementById("myCanvas");
- var context = myCanvas.getContext("2d");
- script>
然后创建一个图片
- 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]