HTML5 Canvas游戏开发(二)高级功能

时间:2022-11-04 20:53:49

  一、变形

  1、放大和缩小

  scale(X,Y)函数。

  当使用该函数时,其起始坐标值也被放大或缩小。当X、Y为负值时,可以实现翻转。

  2、平移变换

  translate(X,Y)函数。

  表示水平方向向左移动,竖直方向向下移动。

  3、旋转变换

  rotate(角度)函数。

  旋转一定角度,是以canvas的起始坐标坐标(0,0)为中心旋转。可使用translate修改canvas的中心。

  4、setTransfrom函数实现倾斜效果

  可使用transfrom()函数代替上述三种函数的功能。

  二、图形的渲染

  1、线性渐变

  使用createLinearGradient函数和addColorStop函数可以实现线性渐变。

  createLinearGradient(x1,y1,x2,y2)

  其中四个参数分别是渐变的出发点坐标(x1,y1)与终点坐标(x2,y2)。

  addColorStop(position,color)

  其中position表示从0.0到1.0之间的数值,表示渐变中颜色地点的相对低位;color参数表示渐变的颜色。

var grd = ctx.createLinearGradient(0,0,200,0);   线性渐变
grd.addColorStop(0.2,"#00ff00");
grd.addColorStop(0.8,"#ff0000");
ctx.fillStyle = grd;
ctx.fillRect(0,0,200,100);

  2、径向渐变

  通过createRadialGradient函数和addColorStop函数实现径向渐变功能。

  createRadialGradient(x0,y0,r0,x1,y1,r1)

  其中,参数x0,y0表示开始圆的圆心坐标,r0为开始圆的直径;x1,y1为结束圆的圆心坐标,r0为结束圆的半径。

var grd = ctx.createRadialGradient(100,100,10,100,100,50);   径向渐变
grd.addColorStop(0,"#00ff00");
grd.addColorStop(1,"#ff0000");
ctx.fillStyle = grd;
ctx.fillRect(0,0,200,200);

  3、颜色合成

  globalCompositeOperation属性说明绘制到画布上的颜色如何与画布上的已有颜色组合起来。

ctx.fillStyle = "#00ff00";   //颜色合成
ctx.fillRect(10,10,50,50);
ctx.globalCompositeOperation = "source-over";
ctx.beginPath();
ctx.fillStyle = "#ff0000";
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fill();

  4、颜色反转

  指的是对图形的每个像素进行颜色取反。

  5、灰度控制

  将图片变成灰色。

  6、阴影效果

  阴影的颜色可以通过shadowColor属性来指定。并且可以通过shadowOffsetX和shadowOffsetY属性来改变。应用到阴影边缘的羽化量可以通过shadowBlur属性来设置。

    ctx.shadowColor="#ff0000";
ctx.shadowBlur=100;
ctx.shadowOffsetX=20;
ctx.shadowOffsetY=30;
var image = new Image()
image.src = "1.jpg";
image.onload = function(){
ctx.drawImage(image,0,0);
}

  下面讲述一个小案例的实现:一个画板。

  代码连接如下:http://www.oschina.net/code/snippet_2685955_55850

  当鼠标按下时调用down函数,将按下标记置为true。并且获取当前鼠标的位置。

  当鼠标移动时调用draw函数。判断当按下标记为true时,获取新的鼠标位置,并开始画图。

  当鼠标弹起时调用up函数。将按下标记置为false。

HTML5 Canvas游戏开发(二)高级功能