canvas中筆觸基礎知識

阿新 • • 發佈：2020-08-20

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); 
}
}