H5 canvas基础入门到捕鱼达人小游戏实现(5)drawImage的应用

最新推荐文章于 2019-02-18 15:30:21 发布

joke_shi

最新推荐文章于 2019-02-18 15:30:21 发布

阅读量3.1k

点赞数 5

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/qq_32514043/article/details/78937370

版权

本文是canvas系列的第五篇，重点介绍如何使用canvas进行图片处理，包括绘制图片、图片平铺、图像剪裁和生成图片。通过实例展示了如何使鱼在canvas画布上游动，为接下来的捕鱼游戏开发奠定了基础。

摘要由CSDN通过智能技术生成

不知不觉，这已经是第五篇canvas系列文章了，课时我们依然没有讲捕鱼游戏，今天这节我们主要讲canvas是如何处理图片的，这节讲完了，我们就可以正式开始编写捕鱼游戏了。

图片处理 drawImage

1、context.drawImage(image,x,y)
x:绘制图像的x坐标
y:绘制图像的y坐标

2、context.drawImage(image,x,y,w,h);
x:画在canvas的x坐标
y:画在canvas的y坐标
w:绘制图像的宽度
h:绘制图像的高度

3、context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
sx:图像上的x坐标
sy:图像上的y坐标
sw:矩形区域的宽度
sh:矩形区域的高度
dx:画在canvas的x坐标
dy:画在canvas的y坐标
dw:画出来的宽度
dh:画出来的高度

绘制图片

这里写图片描述
我们把这张图片绘制到canvas画布上

1、整张图片绘制

var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');
    var oImg = new Image();
    oImg.src = "https://img-blog.csdn.net/20171230163702723?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzI1MTQwNDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast";
    oImg.onload=function(){
   
        gd.drawImage(oImg,0,0);
    }