标签（空格分隔）：canvas html game

书张这样：

蛤？你要用html做游戏？(笔记版)-LMLPHP

本博客的标题只是个噱头，其实命令行也能做游戏！之所以选择canvas是因为它更酷炫，而且可以加到我的blog上。

可以参考我无意中看到的一位博主的作品：

http://www.cnblogs.com/axes/tag/canvas/

第一部分准备工作

第一章准备工作

Canvas本书没有绘图能力，只是一个绘图API，它需要借助JavaScript来实现。值得一提的是。<canvas>标记开始是由Apple在Safari 1.3 Web浏览器中引入的。

1.1 JavaScript基础

对应原书1.6节开始的内容

我们做游戏一般是面向对象，下面简单了解一下js中如何面向对象。

js中函数就是类，所以本书有时讲函数，有时讲类，其实是一个东西。

function MyClass(name, age){

    this.name = name;

    this.age = age;

    this.toString() = function(){

        alert(this.name+":"+this.age);

    };

};

var cls1 = new MyClass("lufy", 10);

cls2.toNumber() = function(){

    ...;

}

注意：是为对象添加方法

这个way可以用来做静态类。

每一个函数都有一个prototype属性，prototype属性指向一个prototype对象。在默认条件下，每个函数都对应的prototype对象的constructor属性又会指向该函数。

当构造函数创建新的对象时，新对象会获取构造函数的prototype属性所指向的prototype对象的所有属性和方法。

由于对象没有prototype属性，不能像构造函数那样直接调用prototype对象。

当我们用函数prototype对象给函数（类）添加方法，那么在创建新的对象时，并不会复制函数（类）的所有方法，而是指向了这个函数所有的方法。

MyClass.prototype.toString = function(){

    this.name...

};

MyClass.prototype = {

    toString:function(){

        alert(this.name + ":" + this.age);

    },

    sayHello:function(){

        alert(this.name + "你好！");

    }

}

用apply方法将父对象的构造函数绑定在子对象上。

function PeopleClass(){

    this.type = "人"

};

PeopleClass.prototype = {

    getType:function(){

        alert("这是一个人");

    }

};

function StudentClass(name, sex){

    PeopleClass.apply(this, arguments);

    this.name = name;

    this.sex = sex;

};

var stu - new StudentClass("lufy", "男");

alert(stu.type);

但这样不能继承方法。需要加也循环。（好奇葩呀-。-）

function PeopleClass(){

    this.type = "人"

};

PeopleClass.prototype = {

    getType:function(){

        alert("这是一个人");

    }

};

function StudentClass(name, sex){

    PeopleClass.apply(this, arguments);

    this.name = name;

    this.sex = sex;

    var prop;

    var proto = this.constructor.prototype;

    for(prop in PeopleClass.protoptype){

        if(!proto[prop]){

            proto[prop] = PeopleClass.prototype[prop];

        }

        proto[prop]["super"] = PeopleClass.prototype;

    }

};

var stu - new StudentClass("lufy", "男");

alert(stu.type);

第二部分基础知识篇

第二章 Canvas 基本功能

2.1 绘制基本图形

2.1.1 直线

<!doctype html>

<html>

<head>

<meta charset="UTF-8" />

<title>c0</title>

</head>

<body>

<canvas id="myCanvas" width="200" height="200">

	你的浏览器不支持HTML5

</canvas>

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	ctx.lineWidth=10;

	ctx.lineCap="butt"

	ctx.strokeStyle="red";

	ctx.beginPath();

    <!--创建一个新的路径-->

	ctx.moveTo(10,10);

	ctx.lineTo(150,50);

	ctx.stroke();

</script>

</body>

</html>

直线线帽

butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。

2.1.2 矩形

描边矩形

<!doctype html>

<html>

<head>

<meta charset="UTF-8" />

<title>c0</title>

</head>

<body>

<canvas id="myCanvas" width="200" height="200">

	你的浏览器不支持HTML5

</canvas>

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	ctx.lineWidth=5;

	ctx.strokeStyle="red";

	ctx.beginPath();

	ctx.strokeRect(10,10,70,40);

</script>

</body>

</html>

填心矩形

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	ctx.lineWidth=5;

	ctx.fillStyle="red";

	ctx.beginPath();

	ctx.fillRect(10,10,70,40);

</script>

或者

ctx.rect(10,10,70,40);

ctx.fill();

2.2.3 圆

<!doctype html>

<html>

<head>

<meta charset="UTF-8" />

<title>c0</title>

</head>

<body>

<canvas id="myCanvas" width="200" height="200">

	你的浏览器不支持HTML5

</canvas>

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	ctx.lineWidth=5;

	ctx.strokeStyle="red";

	ctx.fillStyle="blue";

	ctx.beginPath();

	ctx.arc(100,100,70,0,130*Math.PI/180,true);

	ctx.stroke();

	ctx.fill();

</script>

</body>

</html>

2.1.4 圆角矩形

用前面学的直线和圆弧可以画圆弧和圆角矩形

<!doctype html>

<html>

<head>

<meta charset="UTF-8" />

<title>c0</title>

</head>

<body>

<canvas id="myCanvas" width="200" height="200">

	你的浏览器不支持HTML5

</canvas>

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

    ctx.beginPath();

	ctx.moveTo(20,20);

	ctx.lineTo(70,20);

	ctx.arcTo(120,30,120,70,50);

	ctx.lineTo(120,120);

	ctx.stroke();

</script>

</body>

</html>

2.1.5 擦除Canvas画板

这个功能就像windows画图程序的橡皮擦，可以擦去矩形区域。

<!doctype html>

<html>

<head>

<meta charset="UTF-8" />

<title>c0</title>

</head>

<body>

<canvas id="myCanvas" width="200" height="200">

	你的浏览器不支持HTML5

</canvas>

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	ctx.fileStyle="red";

	ctx.beginPath();

	ctx.fillRect(10,10,200,100);

	ctx.clearRect(20,20,50,50);

</script>

</body>

</html>

2.2 绘制复杂图形

2.2.1 画曲线

贝塞尔曲线，图像学常用曲线。

二次贝塞尔

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	ctx.moveTo(100,100);

	ctx.quadraticCurveTo(20,50,200,20);

	ctx.stroke();

</script>

三次贝塞尔

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	ctx.moveTo(100,100);

	ctx.bezierCurveTo(20,10,268,10,268,170);

	ctx.stroke();

</script>

2.2.2 利用clip在指定区域绘图

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	ctx.arc(100,100,40,0,360*Math.PI/180,true);

	ctx.clip();

	ctx.beginPath();

	ctx.fillStyle='lightblue';

	ctx.fillRect(0,0,300,150);

</script>

2.3 绘制文本

2.3.1 绘制文字

用filltext绘制文字

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	ctx.font="30px Arial";

	ctx.fillText("he;;o wor;d",100,50);

</script>

fillText()第五个参数表示宽度，填了会进行拉伸或者压缩。

用strokeText绘制文字

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	ctx.font="30px Arial";

	ctx.strokeText("he;;o wor;d",100,50);

</script>

这个很好理解，就像空心矩形和实心矩形一样。

加粗和斜体

ctx.font="XXXX"

normal	正常
bold	粗体
bolder	更粗
lighter	更细
某个数字

italic	斜体
oblique	斜体

文字对齐
ctx.textAlign="XXX"

start
end
left
center
right
textBaseline	看不出来

蛤？你要用html做游戏？(笔记版)-LMLPHP

alphabetic
bottom
hanging
ideographaic
middle
top

蛤？你要用html做游戏？(笔记版)-LMLPHP

2.3.2 “画”文字

2.4 图片操作

2.4.1 利用drawImage绘制图片

利用image标签

<!doctype html>

<html>

<head>

<meta charset="UTF-8" />

<title>c0</title>

</head>

<body>

img标签<br />

<img id="face" src="img/0.jpg" alt="The Face" width="267" height="326"/><br />

canvas画板<br />

<canvas id="myCanvas" width="400" height="400">

	你的浏览器不支持HTML5

</canvas>

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	var img=document.getElementById("face");

	img.onload=function(){

		ctx.drawImage(img,10,10);

	};

</script>

</body>

</html>

由于图片是异步加载，图片还没加载成功就调用drawImage()方法，所以图片无法显示。用onload事件会在页面或者图像加载完毕后立即发生，所以我们把drawImage()放到onload事件中。

利用image对象

<!doctype html>

<html>

<head>

<meta charset="UTF-8" />

<title>c0</title>

</head>

<body>

canvas画板<br />

<canvas id="myCanvas" width="400" height="400">

	你的浏览器不支持HTML5

</canvas>

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	var image = new Image();

	image.src="img/0.jpg"

	image.onload=function(){

		ctx.drawImage(image,10,10);

	};

</script>

</body>

</html>

三种函数原型的不同

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	var image = new Image();

	image.src="img/0.jpg"

	image.onload=function(){

		ctx.drawImage(image,10,10);

		ctx.drawImage(image,			  260,10 ,100,100);

		ctx.drawImage(image,50,50,100,100,260,130,100,100);

		<!--截取图片从(50,50)到(100,100)的部分-->

	};

</script>

蛤？你要用html做游戏？(笔记版)-LMLPHP

2.4.2 利用getImageData和putImageData绘制图片

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	var image = new Image();

	image.src="img/0.jpg";

	image.onload=function(){

		ctx.drawImage(image,10,10);

		var imgData=ctx.getImageData(50,50,200,200);

		ctx.putImageData(imgData,10,400);

		ctx.putImageData(imgData,200,400,50,50,100,100);

		<!--截取图片从(50,50)到(100,100)的部分-->

	};

</script>

2.4.3 利用createImageData新建像素

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	var image = new Image();

	image.src="img/0.jpg";

	image.onload=function(){

		ctx.drawImage(image,10,10);

		var imgData=ctx.getImageData(50,50,200,200);

		var imgData01=ctx.createImageData(imgData);

		for(i=0;i<imgData01.width*imgData01.height*4;i+=4){

			imgData01.data[i+0]=255;

			imgData01.data[i+1]=0;

			imgData01.data[i+2]=0;

			imgData01.data[i+3]=255;

		}

		ctx.putImageData(imgData01,10,400);

	};

</script>

第三章 Canvas 高级功能

3.1 变形

放大缩小

横轴放大x，纵轴y倍

小于1为缩小

负数为翻转

平移

平移的是画板

旋转

默认为以原点为中心，需要平移-旋转-平移才可以变为以物体为中心。

用transform矩阵实现多样化变形

\[\left(
\begin{matrix}

a & c & e\\
b & d & f\\
0 & 0 & 1\\

\end{matrix}
\right)
\]

缩放：translate(a,0,0,d,0,0);

平移：translate(1,0,0,1,e,f);

旋转：\(translate(cos\theta,sin\theta,-sin\theta,cos\theta,0,0);\)

我们还可以用settranslate()，会清除上一个transform效果。

倾斜

详见书P61

到时候放两张图

图片的扭曲效果

代码先跳过。就是把图片分成几部分。clip()后加个restore()函数

3.2 图形的渲染

3.2.1 渐变

线性渐变

position是0~1的一个数，表示渐变中颜色的地位。

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	var grd=ctx.createLinearGradient(0,0,200,0);

	ctx.beginPath();

	grd.addColorStop(0.2,"#00ff00");

	grd.addColorStop(0.8,"#ff0000");

	ctx.fillStyle=grd;

	ctx.fillRect(0,0,200,100);

	ctx.closePath();

</script>

径向渐变

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	var grd=ctx.createRadialGradient(100,100,10,100,100,50);

	ctx.beginPath();

	grd.addColorStop(0.2,"#00ff00");

	grd.addColorStop(0.8,"#ff0000");

	ctx.fillStyle=grd;

	ctx.fillRect(0,0,200,200);

	ctx.closePath();

</script>

3.2.2 颜色合成

先跳过。

3.2.3 颜色反转

就是用255-RGB

3.2.4 灰度控制

书上用的是心理学公式的灰度值。

3.2.5 阴影效果

<script type="text/javascript">

	var c=document.getElementById("myCanvas");

	var ctx=c.getContext("2d");

	ctx.shadowColor="#ff0000";

	ctx.shadowBlur=10;

	ctx.shadowOffsetX=10;

	ctx.shadowOffsetY=10;

	var image = new Image();

	image.src="img/0.jpg";

	image.onload=function(){

		ctx.drawImage(image,0,0);

	};

</script>

3.3 自定义画板-.-

3.3.1 画板的建立-.-

很有趣

paint0代码演示

<script type="text/javascript">

	var canvas=document.getElementById("myCanvas");

	var ctx=canvas.getContext("2d");

	//黑色区域作为画板

	ctx.fillStyle="black";

	ctx.fillRect(0,0,600,300);

	//按下标记

	var on_off=false;

	var oldx= -10;

	var oldy= -10;

	//线的颜色

	var linecolor="white";

	//线宽

	var linw=4;

	//鼠标事件,当鼠标按下时会启用XX函数

	canvas.addEventListener("mousemove",draw,true);

	canvas.addEventListener("mousedown",down,false);

	canvas.addEventListener("mouseup",up,false);

	function down(event){

		on_off=true;

		oldx=event.pageX-10;

		oldy=event.pageY-10;

	}

	function up(){

		on_off=false;

	}

	function draw(event){

		if(on_off==true){

			var newx=event.pageX-10;

			var newy=event.pageY-10;

			ctx.beginPath();

			ctx.moveTo(oldx,oldy);

			ctx.lineTo(newx,newy);

			ctx.strokeStyle=linecolor;

			ctx.lineWidth=linw;

			ctx.lineCap="round";

			ctx.stroke();

			oldx=newx;

			oldy=newy;

		};

	};

</script>

我们稍微改一改还可以做一个完美画板。

<!doctype html>

<html>

<head>

<meta charset="UTF-8" />

<title>c0</title>

</head>

<body>

<canvas id="myCanvas" width="600" height="300">

	你的浏览器不支持HTML5

</canvas><br>

<button style="width:80px;background-color:yellow;" 		   onClick='linecolor="yellow";linw=4;'>yellow</button>

<button style="width:80px;background-color:red;" 			   onClick='linecolor="red";   linw=4;'>red</button>

<button style="width:80px;background-color:blue;" 			   onClick='linecolor="blue";  linw=4;'>blue</button>

<button style="width:80px;background-color:green;" 			   onClick='linecolor="green"; linw=4;'>green</button>

<button style="width:80px;background-color:white;" 			   onClick='linecolor="white"; linw=4;'>white</button>

<button style="width:80px;background-color:black;color:white;" onClick='linecolor="black"; linw=50;'>black</button><br>

<script type="text/javascript">

	var canvas=document.getElementById("myCanvas");

	var ctx=canvas.getContext("2d");

	//黑色区域作为画板

	ctx.fillStyle="black";

	ctx.fillRect(0,0,600,300);

	//按下标记

	var on_off=false;

	var oldx= -10;

	var oldy= -10;

	//线的颜色

	var linecolor="white";

	//线宽

	var linw=4;

	//鼠标事件,当鼠标按下时会启用XX函数

	canvas.addEventListener("mousemove",draw,true);

	canvas.addEventListener("mousedown",down,false);

	canvas.addEventListener("mouseup",up,false);

	function down(event){

		on_off=true;

		oldx=event.pageX-10;

		oldy=event.pageY-10;

	}

	function up(){

		on_off=false;

	}

	function draw(event){

		if(on_off==true){

			var newx=event.pageX-10;

			var newy=event.pageY-10;

			ctx.beginPath();

			ctx.moveTo(oldx,oldy);

			ctx.lineTo(newx,newy);

			ctx.strokeStyle=linecolor;

			ctx.lineWidth=linw;

			ctx.lineCap="round";

			ctx.stroke();

			oldx=newx;

			oldy=newy;

		};

	};

</script>

</body>

</html>

第四章 lufylegend开源库件

4.1 lufylegend库件介绍

lufylengend是本书作者开发的html5库。

封装了Canvas绘图所有的API
利用JavaScript的setInterval函数，对Canvas画板进行周期性重绘。
每次对Canvas画板重绘时，首先使用clearRect方法清空整个画板，然后再调用需要进行重绘的API

做游戏

蛤？你要用html做游戏？(笔记版)

第一部分 准备工作

第一章 准备工作

1.1 JavaScript基础

第二部分 基础知识篇

第二章 Canvas 基本功能

2.1 绘制基本图形

2.1.1 直线

2.1.2 矩形

2.2.3 圆

2.1.4 圆角矩形

2.1.5 擦除Canvas画板

2.2 绘制复杂图形

2.2.1 画曲线

2.2.2 利用clip在指定区域绘图

2.3 绘制文本

2.3.1 绘制文字

2.3.2 “画”文字

2.4 图片操作

2.4.1 利用drawImage绘制图片

2.4.2 利用getImageData和putImageData绘制图片

2.4.3 利用createImageData新建像素

第三章 Canvas 高级功能

3.1 变形

3.2 图形的渲染

3.2.1 渐变

3.2.2 颜色合成

3.2.3 颜色反转

3.2.4 灰度控制

3.2.5 阴影效果

3.3 自定义画板-.-

3.3.1 画板的建立-.-

第四章 lufylegend开源库件

4.1 lufylegend库件介绍

第一部分准备工作

第一章准备工作

第二部分基础知识篇