canvas进阶

2017-12-26

图形和文字阴影

  • ctx.shadowColor='pink';设置阴影颜色。
  • ctx.shadowBlur=20;设置阴影模糊度。
  • ctx.shadowOffsetX=10;设置阴影在x轴上的偏移量，负数表示为反方向。
  • ctx.shadowOffsetY=10;设置阴影在y轴上的偏移量，负数表示为反方向。
    屏幕快照 2017-12-26 下午9.57.43.png

图形组合

图形的基本转换

  • 不管是平移、旋转、缩放都是改变画布的位置和大小，不是图形的样式。
    FFE3812A-1634-4B6C-ABA5-CCEB798776D3.png

  • translate(x,y);设置画布的偏移量，x轴上和y轴上。可以改变画布的中心点

    1
    2
    3
    4
    5
    6
    7
    ctx.beginPath();
    ctx.fillStyle="pink";
    ctx.fillRect(0,0,100,100);
    ctx.translate(50,50);
    ctx.beginPath();
    ctx.fillStyle="red";
    ctx.fillRect(0,0,100,100);

屏幕快照 2017-12-26 下午10.07.13.png

  • rotate(deg);设置画布围绕中心点进行旋转的角度。
    1
    2
    3
    4
    5
    6
    7
    ctx.beginPath();
    ctx.fillStyle="pink";
    ctx.fillRect(100,100,50,50);
    ctx.rotate(Math.PI/2);
    ctx.beginPath();
    ctx.fillStyle="blue";
    ctx.fillRect(100,100,50,50);

屏幕快照 2017-12-26 下午10.18.51.png

  • scale(x,y);设置画布的缩放比例。
    1
    2
    3
    4
    5
    6
    7
    ctx.beginPath();
    ctx.fillStyle="pink";
    ctx.fillRect(10,0,50,50);
    ctx.scale(2,2);
    ctx.beginPath();
    ctx.fillStyle="blue";
    ctx.fillRect(50,0,50,50);

屏幕快照 2017-12-26 下午10.23.29.png

画布状态的保存和释放

  • 在对画布进行各种图层操作和画布坐标轴变换时，画布的坐标轴最后往往我们自己都分不清了，所以要想回到最初的坐标轴状态，就需要函数来保存画布的状态。这两句函数成对出现
  • ctx.save();此函数保存的是这一句代码之前的画布状态，类似于栈的概念，先保存的后释放
  • ctx.restore();此函数释放的是就近原则的save()函数保存的状态。

绘制静态表盘

  • 此画布是宽500，高500
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    //绘制表盘
    ctx.beginPath();
    ctx.arc(250,250,250,0,Math.PI*2);
    ctx.fillStyle="black";
    ctx.fill();
    //改变画布的旋转中心点，通过位移
    ctx.translate(250,250);
    //绘制刻度线
    for(var i=0;i<12;i++){
    	ctx.save();
    	ctx.beginPath();
    	ctx.rotate(i*(Math.PI/6));
    	ctx.moveTo(0,-250);
    	ctx.lineTo(0,-195);
    	ctx.lineWidth=20;
    	ctx.lineCap="round";
    	ctx.strokeStyle="white";
    	ctx.stroke();
    	ctx.restore();
    	for(var j=1;j<5;j++){
    		ctx.save();
    		ctx.beginPath();
    		ctx.rotate(i*(Math.PI/6) + j*(Math.PI/5));
    		ctx.moveTo(0,-247);
    		ctx.lineTo(0,-210);
    		ctx.lineWidth=10;
    		ctx.lineCap="round";
    		ctx.strokeStyle="green";
    		ctx.stroke();
    		ctx.restore();
    	}
    }
    //画时针
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(100,0);
    ctx.lineCap="round";
    ctx.lineWidth=15;
    ctx.strokeStyle="blue";
    ctx.stroke();
    //画分针
    ctx.rotate(Math.PI/6);
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(120,0);
    ctx.lineCap="round";
    ctx.lineWidth=13;
    ctx.strokeStyle="gray";
    ctx.stroke();
    //画秒针
    ctx.rotate(Math.PI/6);
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(140,0);
    ctx.lineCap="round";
    ctx.lineWidth=9;
    ctx.strokeStyle="cyan";
    ctx.stroke();
    //画表盘中心点
    ctx.beginPath();
    ctx.arc(0,0,15,0,Math.PI*2);
    ctx.fillStyle="white";
    ctx.fill();

屏幕快照 2017-12-27 下午8.47.33.png