html canvas菜鸟,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.οnlοad=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.οnlοad=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