江湖上流传开来的除了牛叉的"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();
(2)矩形
ctx.fillRect(0,0,100,100);
(3)圆形
ctx.arc(200,200,100,0,Math.PI*(1/2),false); //x,y,半径,起始角度,结束角度,是否逆时针方向
ctx.stroke();
(4)三角形(用直线来连接实现)
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();
(5)曲线
ctx.lineWidth = 2;
ctx.strokeStyle = "#f00";
ctx.moveTo(10,10);
ctx.arcTo(210,60,10,210,20);
ctx.stroke();
(6) 二次贝塞尔曲线
ctx.lineWidth = 3;
ctx.strokeStyle = 'blue';
ctx.moveTo(100,100);
ctx.quadraticCurveTo(125,225,225,166);
ctx.stroke();
(7) 三次贝塞尔曲线
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);
}
3、绘制文字
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
除了使用fillText还可以strokeText,可同时使用之前绘制图形的一些常用方法,比如strokeStyle等。
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);
5、样式、阴影
设置阴影大小、颜色、偏移量
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);
使用背景图片,和css一样,可以设置平铺等属性
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
6、合成方法
所谓的合成方法就是两个图像叠加的时候,使用什么样的处理方式,比如覆盖在上面,覆盖的部分颜色的加深还是减淡等:
写了一个测试demo: http://codepen.io/fonglezen/pen/xGPXGW
在这些基本方法的基础上,你要做出像样点的东西,还是需要自己的计算能力和图形学能力以及创意。
比如数学里面的物理计算知识(物体运动、碰撞检测等)、图形学里面的颜色(反色,像素数据处理等)、创意(游戏)。
动画才是让canvas活色生香起来的动力。
而canvas并没有提供动画的方法,他需要你自己去写动画的过程。
在canvas中,难点其实在于如何运用你所掌握的数学知识、物理知识、美术、创意等东西,叠加在一起创建酷炫的东西。
比如粒子动画、H5页游等,比如星空、烟花、下雪等。
canvas的一些例子:https://developer.mozilla.org/en-US/demos/tag/tech:canvas