其实canvas真的很简单，复杂的部分其实是你的创意

标签：html5   canvas   创意   javascript   

江湖上流传开来的除了牛叉的"H5"，还有牛叉的canvas应用。

canvas是html5的一部分，当然他们说的H5也并不是html5的意思，只是表示在手机浏览器中，更侠义的是在微信浏览器中打开的酷炫的网页。

曾几何时，我也觉得canvas真的酷爆了，各种什么烟花、酷炫的动画效果、canvas游戏等，都燃烧着我学习的热情。

后来通过学习，多看书，其实canvas并不复杂，要用到的东西也不多。

大概整理一下：

1、绘制基本几何图形

（1）直线

ctx.moveTo(100,200);
ctx.lineTo(120,300);
ctx.lineWidth = 10;
ctx.strokeStyle = '#000';
ctx.stroke();

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

（3）圆形

ctx.arc(200,200,100,0,Math.PI*(1/2),false);		//x,y,半径，起始角度，结束角度，是否逆时针方向
ctx.stroke();

ctx.moveTo(400,200);
ctx.lineTo(350,260);
ctx.lineTo(450,260);
ctx.lineTo(400,200);
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.fillStyle = 'orange';
ctx.stroke();
ctx.fill();

ctx.lineWidth = 2;
ctx.strokeStyle = "#f00";
ctx.moveTo(10,10);
ctx.arcTo(210,60,10,210,20);
ctx.stroke();

ctx.lineWidth = 3;
		ctx.strokeStyle = 'blue';
		ctx.moveTo(100,100);
		ctx.quadraticCurveTo(125,225,225,166);
		ctx.stroke();

ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);

2、添加图片

有三种画法，函数方法一样，只是参数不同，更多的参数表示更复杂也更多可控制的东西。

var img = new Image();
		img.src = '1.jpg';
		img.onload = function(){
			//第一种画法
			ctx.drawImage(img,0,0);

			//第二种画法,5 args
			ctx.drawImage(img,330,0,200,300);

			//第三种画法，9 args
			ctx.drawImage(img,0,0,320,384,330,320,160,192);
		}

ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

4、转换（缩放，位移，旋转）

例子：旋转一个矩形

var mycanvas = document.getElementById('mycanvas'),
			ctx = mycanvas.getContext('2d'),
			cw = mycanvas.width,
			ch = mycanvas.height,
			rw = 100,
			rh = 50,
			degree = 0;

		
		setInterval(function(){
			ctx.clearRect(0,0,cw,ch);
			ctx.save();
			ctx.translate(300,300);
			ctx.rotate(Math.PI/180*(degree++));
			ctx.fillStyle = '#999';
			ctx.fillRect(-rw/2,-rh/2,rw,rh);
			ctx.restore();

		},10);

设置阴影大小、颜色、偏移量

ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.shadowOffsetX = "10";
ctx.shadowOffsetY = "20";

创建并使用线性渐变：

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

所谓的合成方法就是两个图像叠加的时候，使用什么样的处理方式，比如覆盖在上面，覆盖的部分颜色的加深还是减淡等：

写了一个测试demo： http://codepen.io/fonglezen/pen/xGPXGW

在这些基本方法的基础上，你要做出像样点的东西，还是需要自己的计算能力和图形学能力以及创意。

比如数学里面的物理计算知识（物体运动、碰撞检测等）、图形学里面的颜色（反色，像素数据处理等）、创意（游戏）。

动画才是让canvas活色生香起来的动力。

而canvas并没有提供动画的方法，他需要你自己去写动画的过程。

在canvas中，难点其实在于如何运用你所掌握的数学知识、物理知识、美术、创意等东西，叠加在一起创建酷炫的东西。

比如粒子动画、H5页游等，比如星空、烟花、下雪等。

其实canvas真的很简单，复杂的部分其实是你的创意

标签：html5   canvas   创意   javascript   

原文地址：http://blog.csdn.net/wuweitiandian/article/details/46691375