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