canvas快速入门（二）

canvas笔触

线条

	  ctx.lineCap = "round"//超出去的圆角 butt 未出头的 squre 出头的

链接处

	  ctx.lineJoin = "bevel"// 平角  round 圆角 miter 尖角

设置边线的宽度

 	  ctx.lineWidth = 5;

设置边线颜色

      ctx.strokeStyle = "red" 

填充颜色

      ctx.fillStyle = "#FFDD88"

绘制路径

      ctx.beginPath()

把笔移动到什么位置

      ctx.moveTo(100,100)

移动到什么位置

	  ctx.lineTo(200,100)

描述笔触效果

 	  ctx.stroke();

结合上面绘制出十字

	  ctx.moveTo(300,50);
      ctx.lineTo(300,350);

再使用lineTo()绘制出菱形案例

	  var canvas = document.querySelector("canvas");
      var ctx = canvas.getContext("2d");
      ctx.lineCap = "round";
      ctx.lineJoin = "miter";
      ctx.lineWidth = 2;
      ctx.strokeStyle = "red";
      ctx.fillStyle = "#FFDD88";
	  ctx.beginPath();
      ctx.moveTo(300,350);
      ctx.lineTo(100,200);
      ctx.lineTo(300,50);
      ctx.lineTo(500,200);
      ctx.closePath();
      ctx.fill();

闭合路径

ctx.closePath();
    ctx.fill(); 

绘制五角星

	var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    ctx.lineCap = "round";
    ctx.lineJoin = "miter";
    ctx.lineWidth = 2;
    ctx.strokeStyle = "red";
    ctx.fillStyle = "#FFDD88";
    ctx.fillStyle = "#FFDD88"
    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.lineTo(600,200);
    ctx.lineTo(250,450);
    ctx.lineTo(400,50);
    ctx.lineTo(550,450);
    ctx.closePath();
    ctx.stroke();
    ctx.fill()

笔触的弧线

绘制50半径的圆形

开始路径

  ctx.beginPath();

设置路径

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

参数

• 开始位置x
• 开始位置y
• 半径50
• 开始的角度(弧度)
• 结束的角度(弧度)
• 是否顺时针(默认false)

边线合拢

 ctx.stroke();

填充

  ctx.fill();

绘制半圆形

  ctx.beginPath();
  ctx.arc(100,100,50,Math.PI/180*0,Math.PI/180*180);  
  //关闭路径
  ctx.closePath();
  ctx.stroke();
  ctx.fill();

绘制扇形

 ctx.beginPath();
 ctx.moveTo(100,100);    
 ctx.arc(100,100,50,Math.PI/180*330,Math.PI/180*30,true);
 ctx.closePath();
 ctx.stroke();
 ctx.fill();
 ctx.fillStyle="red";

变形 偏移 向外偏移 向右移动挪10个像素 类似饼状图

  ctx.translate(10,0);
  ctx.beginPath();
  ctx.moveTo(100,100);
  ctx.arc(100,100,50,Math.PI/180*330,Math.PI/180*30);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();

圆环案例

 		//圆环案例
        //绘制径向填充
        //渐变参数  x  y起始位置  半径  结束位置  x y结束位置  结束半径   
        var file = ctx.createRadialGradient(100, 100, 100, 100, 100, 50);
    
        //偏移 0.48 颜色
        //加过渡解决毛边问题
        file.addColorStop(0.48, "rgba(255,0,0,0.3)");
        file.addColorStop(0.5, "rgba(255,0,0,0)");
        file.addColorStop(0.5, "rgba(255,0,0,0)");

       
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowBlur = 5;
        ctx.shadowColor = "#CCCCCC";
        ctx.fillStyle = file;

        ctx.beginPath();
        ctx.arc(100, 100, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360);
        ctx.closePath();
        ctx.fill();
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowBlur = 0;
        ctx.shadowColor = "#CCCCCC";