canvas:小白的学习之路

研究html5 canvas制作简易动画

初学canvas，都是一些我在学习中的一下自我理解的教程。

目录

1. canvas前期的准备
2. canvas基础的一些功能
3. canvas动画效果
4. 参考资料

效果：传送门

canvas前期的准备：

1. 首先要在html中创建一个canvas标签。

2. 在js里，首先需要定义这个canvas元素，在创建`context`对象，为了调用`context`对象里的方法。

3. `context`对象里有很多方法，大家可以用打印出来，对应开发文档查看已经含义，因为属性过度，我在这里不一一列举出来。

前期的准备工作完成，让我们开始正题吧。

canvas基础的一些功能

1. 绘制纯色矩形
    // 在画布里填充一个颜色为黑色,距左10 距上20 宽度400 高度100 的矩形。
    // context.fillStyle=color|gradient|pattern;        
    // CSS 颜色值。默认值是 #000000。|| 用于填充绘图的渐变对象 || 用于填充绘图的 pattern 对象
    c.fillStyle="#000";    
    // context.fillRect(x,y,width,height);
    //矩形左上角的 x 坐标 || 矩形左上角的 y 坐标 || 矩形的宽度，以像素计 || 矩形的高度，以像素计
    c.fillRect(10,20,480,100)    
2. 绘制一条实体斜线
    // 在画布中绘制一条从画布起始(10,120)到(410,180)的一条斜线。
    // context.moveTo(x,y);                              
    // 路径的目标位置的 x 坐标    路径的目标位置的 y 坐标
    c.moveTo(10,130);
    // context.lineTo(x,y);                            
    // 路径的目标位置的 x 坐标    路径的目标位置的 y 坐标            
    c.lineTo(490,200);
    // context.strokeStyle=color|gradient|pattern;
    // CSS 颜色值。默认值是 #000000。|| 用于填充绘图的渐变对象 || 用于填充绘图的 pattern 对象
    // c.strokeStyle="yellow";
    // context.stroke();
    // 按照对应的路径绘制图像。            
    c.stroke();                                                    
            
3. 在画布上绘制一个圆形
    // context.beginPath();
    // 创建一条路径，或重置当前的路径。
    c.beginPath();                                             
    // context.arc(x,y,r,sAngle,eAngle,counterclockwise);     
    // x: 圆的中心的 x 坐标。，
    // y: 圆的中心的 y 坐标。，    
    // r: 圆的半径。，    
    // sAngle: 起始角，三点钟位置是 0 度。，
    // eAngle: 结束角，以弧度计。
    // counterclockwise: 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
    c.arc(250,250,40,0,2*Math.PI);    
    // context.stroke();
    // 按照对应的路径绘制图像。
    c.stroke();        
                                        
4. 在画布上绘制文字(实心)
    // 在画布上绘制文字(实心)
    // context.font="italic small-caps bold 12px arial";
    c.font = "900 40px Arial";
    // context.fillText(text,x,y,maxWidth);        
    // 规定在画布上输出的文本。  x轴  y轴    可选。允许的最大文本宽度，以像素计。        
    c.fillText("侯 大 大",30,350);    
   
5. 在画布上绘制文字(空心)
    // context.font="italic small-caps bold 12px arial";
    c.font = "900 40px Arial";            
    // context.strokeText(text,x,y,maxWidth);    
    // 规定在画布上输出的文本。  x轴  y轴    可选。允许的最大文本宽度，以像素计。
    c.strokeText("侯 大 大",320,350);    

canvas动画效果

1. 猩猩走路和盒子loading
    // 在画布上绘制图片
    var oImg = new Image(),                                // 猩猩
        oImg2 = new Image();                            // 盒子loading
        
    oImg.onload=function(){    
        // var pat = c.createPattern(oImg,"no-repeat");    
        // context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");     
        // 规定要使用的图片、画布或视频元素。 水平和垂直方向重复。
        // 图片、剪切的x坐标、剪切的Y轴坐标、剪切图像的宽度、剪切图像的高度、图像x坐标、图像y坐标、图像的宽度、图像的高度
        // context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
        var step=-80,
            count = 0,
            timer = setInterval(function(){
                count++;
                step+=10;
                if(count==4){
                    count=0;
                }
                if(step>=can.width){
                    step = -80;
                }
                c.clearRect(0,400,can.width,120);
                c.drawImage(oImg,
                    count*40,112,40,56,
                    step,400,40*2,56*2
                );
            },300);
    }
    oImg.src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1527675707&di=5e410e2de9d22fc58ba719647baffee2&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fwh%253D600%252C800%2Fsign%3Da1b3b45ecaef76093c5e91991eed8ff4%2F09fa513d269759ee902ad008b3fb43166c22dfff.jpg";
    
    // 盒子loading
    oImg2.onload=function(){
        var count = 0,
            top = 0,
            timer = setInterval(function(){
                count++
                if(count==5){
                    count = 0;
                    top++;
                }

                if(top==5){
                    top =0;
                }
                c.clearRect(0,550,can.width,can.height);
                c.drawImage(oImg2,
                    120*count,105*top,120,105,
                    180,550,120,105
                );
            },60);
            
    };
    oImg2.src="img/hezi.png"

参考资料

1. 菜鸟教程：http://www.runoob.com/html/html5-canvas.html
2. w3school：http://www.w3school.com.cn/html5/html5_ref_canvas.asp