【canvas】绘制图片

第一丶简单绘制图片

语法：

　　

 c.drawImage(img,x,y,width,height)如果单纯知识绘画出图片到画布只填这5个参数就可以
 参数:
      img:是图片对象是由new Image();出来的
      x,y:是绘画到画布的图片的开始坐标
      width，heitght:是绘画在画布上的图片的宽和高

 

第二丶截取图片

c.drawImage(img,image-x,image-y,image-width,image-height,canvas-x,canvas-y,canvas-width,canvs-height)
参数讲解:
　　img是图片对象是由img=new Image();出来的
　　image-x,image-y:是要截取图片的开始坐标,x,y坐标
　　image-width,image-height:是要截取图片的宽度和高度
　　canvas-x,canvas-y:是绘画到画布上的哪个开始和
　　canvas-width,canvs-height:是绘画到画布上的图片的宽和高

 第三丶绘制序列帧动画代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<canvas height="400" width="800">
    
</canvas>
<button value="3">上</button>
<button value="0">下</button>
<button value="1">左</button>
<button value="2">右</button>
    
</body>
<script type="text/javascript">
    var canvas=document.querySelector("canvas");
    canvas.style.border="1px solid #000";
    var c=canvas.getContext("2d");
    var img=new Image();//创建一个图片的对象
    img.src="./DMMoprator2.png";//给这个图片对象设置src属性
    var forward=0;
    img.onload=function(){
        frameIndex=0;
        setInterval(function(){
            c.clearRect(0,0,canvas.width,canvas.height);//清除画布所有内容，让后面的代码重新绘画
            c.drawImage(img,frameIndex*40,forward*65,40,65,100,50,100,200*(40/65));//绘画图片
            //c.drawImage(img,x,y,width,height)如果单纯知识绘画出图片到画布只填这5个参数就可以
            //img是图片对象是由new Image();出来的
            //x,y是绘制到画布的图片的开始坐标
            //width，heitght是绘制在画布上的图片的宽和高
            frameIndex++;
            frameIndex%=4;
        },1000/7)//图片一秒动7次
    }
    var btn=document.querySelectorAll("button");//获取所有的控制按钮
    console.log(btn);
    for (var i = 0; i <btn.length ; i++) {
        btn[i].onclick=function(){
            
            forward=this.value;//当触发点击事件的时候就会赋值给forward从而控制图片的动向
            console.log(forward);
        }
        
    };

    

</script>
</html>

结果:

 

posted @ 2017-08-11 15:24  丰study  阅读(161)  评论(0)    收藏  举报