canvas中笔触基础知识

canvas中笔触基础知识

1.绘制矩形

• lineCap 线段的起点和终点的样式 butt round square
  

• lineJoin 两线段连接处所显示的样子 round bavel miter
  

• beginPath() 开始

• closePath() 结束 自动闭合图形

• moveTo(x,y) 起点

• lineTo(x,y) 图形中间节点

• stroke() 图形绘制(显示)

• fill() 图形填充

var canvas=document.querySelector("canvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(150,50);
ctx.lineTo(150,150);
ctx.lineTo(50,150)
ctx.closePath();
ctx.lineWidth=10;   //线条宽度
ctx.strokeStyle="red";   //线条颜色
ctx.stroke();
ctx.fillStyle="blue"   //填充色
ctx.fill();

2.绘制圆形

• ctx.arc(100,100,100,Math.PI/1800,Math.PI/180180,true); 参数：前两个实圆心，之后为半径、开始弧度 结束弧度 是否逆时针（默认顺时针）

ctx.beginPath();
ctx.strokeStyle="red";
ctx.arc(100,100,100,Math.PI/180*0,Math.PI/180*360)
ctx.stroke();

效果图:

1）适用场景：图形的划分

ctx.beginPath();
ctx.strokeStyle="red";
ctx.moveTo(100,100);   //如果不设置起始点的话，只会显示弧度的边线，不是扇形
ctx.arc(100,100,100,Math.PI/180*330,Math.PI/180*30,true)
ctx.closePath();
ctx.stroke();
ctx.fillStyle="yellow";
ctx.fill();

效果图：

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

ctx.fillStyle="red";
ctx.translate(10,0)
ctx.beginPath();
ctx.strokeStyle="red";
ctx.moveTo(100,100);
ctx.arc(100,100,100,Math.PI/180*330,Math.PI/180*30)
ctx.closePath();
ctx.stroke();

ctx.fill();

效果图：

2）适用场景：占比展示（当前数值占据总数之的百分比） 圆环展示

function setLevel(current,total) {
  var r=360-current/total*360   //剩余的角度
  var file = ctx.createRadialGradient(100, 100, 100, 100, 100, 50);  //圆环中央的渐变色
  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";
  var file = ctx.createRadialGradient(100, 100, 100, 100, 100, 50);  //剩余角度的圆环的绘制  ，会对总的进行覆盖
  file.addColorStop(0.48, "rgba(255,0,0,1)");
  file.addColorStop(0.5, "rgba(255,0,0,0)");
  file.addColorStop(0.5, "rgba(255,0,0,0)");
  ctx.fillStyle = file;
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.arc(
    100,
    100,
    100,
    (Math.PI / 180) * 0,
    (Math.PI / 180) * r,
    true
  );
  ctx.closePath();
  ctx.fill();
}

3.绘制基础贝塞尔曲线

• ctx.moveTo(150, 20); ctx.arcTo(150,100,50,20,30);
  movTo是蓝点为起点 x1,y1是下面的红点 x2,y2是左边的红点 最后一个参数是半径

ctx.beginPath();
ctx.moveTo(150,100);
ctx.arcTo(150,200,0,100,50)
ctx.stroke();

效果图：

4.绘制二次贝塞尔曲线 只有一个控制点

• quadraticCurveTo(cp1x, cp1y, x, y) cp1x,cp1y为一个控制点，x,y为结束点(目标点) 开始点是moveTo(x1,y1)

ctx.beginPath();
ctx.moveTo(100,100);    //开始点
ctx.quadraticCurveTo(200,300,300,100)   //控制点和结束点
ctx.stroke();

效果图:

5.绘制三次贝塞尔曲线 两个控制点

• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

ctx.fillStyle="red";
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.stroke();
ctx.fill();

效果图：

画板

ctx.strokeStyle="red";
ctx.beginPath();
canvas.addEventListener("mousedown",mouseHandler);

function mouseHandler(e){
if(e.type==="mousedown"){
    ctx.moveTo(e.offsetX,e.offsetY);
    canvas.addEventListener("mousemove",mouseHandler);
    canvas.addEventListener("mouseup",mouseHandler);
    canvas.addEventListener("mouseleave",mouseHandler);
}else if(e.type==="mousemove"){
  ctx.lineTo(e.offsetX,e.offsetY);
  ctx.stroke();
}else{
  canvas.removeEventListener("mousemove",mouseHandler);
  canvas.removeEventListener("mouseup",mouseHandler);
    canvas.removeEventListener("mouseleave",mouseHandler); 
}
}