canvas 画曲线 弧线说明
创建弧线
arc() 方法创建弧/曲线(用于创建圆或部分圆)。
语法:context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数:x,y 园的中心的坐标,r 园的半径
sAngle 起始角 弧度记,eAngle 结束角,
counterclockwise 规定是顺时针还是逆时针画图,false 顺时针,true 逆时针
图形说明:
var mycanvas = document.getElementById("mycanvas");
if (mycanvas == null) {
return false;
}
var context = mycanvas.getContext("2d");
context.beginPath();
context.arc(150, 150, 120, 0, 1.5 * Math.PI, false);//顺时针
context.stroke();
context.closePath();
context.beginPath();
context.arc(300, 150, 120, 2 * Math.PI, 0 * Math.PI, true);//逆时针
context.stroke();
context.closePath();
创建曲线
arcTo 创建两切线之间的弧/曲线
语法:context.arcTo(x1,y1,x2,y2,r);
参数:x1,y1曲线的第一个控制点,x2,y2 曲线的第二个控制点,曲线的半径
说明:arcTo其实是通过起点,第1点,第2点的两条直线,组成了一个夹角,而这两条线,也是参数圆的切线。
其中圆的半径决定了圆会在什么位置与线条发生切边。就像一个球往一个死角里面滚,球越小就滚得越进去,越靠近死角;球大则反之。
var mycanvas = document.getElementById("mycanvas");
if (mycanvas == null) {
return false;
}
var context = mycanvas.getContext("2d");
context.beginPath();
context.strokeStyle = "blue";
context.lineWidth = 5;
context.moveTo(220, 300);
context.arcTo(400, 300, 330, 430, 60);
context.stroke();
context.closePath();
context.beginPath();
context.strokeStyle = "green";
context.lineWidth = 3;
context.moveTo(220, 300);
context.lineTo(400, 300);
context.lineTo(330, 430);
context.fillText("x1,y1", 410, 300);
context.fillText("x2,y2", 330, 440);
context.stroke();
context.closePath();
裁剪图形
clip() 方法从原始画布中剪切任意形状和尺寸。
语法:context.clip();
说明:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。
您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存,
并在以后的任意时间对其进行恢复(通过 restore() 方法)。
var mycanvas = document.getElementById("mycanvas");
if (mycanvas == null) {
return false;
}
var context = mycanvas.getContext("2d");
context.beginPath();
context.strokeStyle = "blue";
context.rect(460, 10, 200, 200);
context.stroke();
context.clip();
context.closePath();
context.fillStyle = "green";
context.fillRect(400, 10, 300, 100);
判断一个点是否在某条线上
isPointInPath 判断一个点是否在某个线路上,
语法:context.isPointInPath(x,y)
参数:x,y测试点的x,y坐标
var mycanvas = document.getElementById("mycanvas");
if (mycanvas == null) {
return false;
}
var context = mycanvas.getContext("2d");
context.rect(10, 300, 120, 120);
if (context.isPointInPath(10, 320)) {
context.stroke();
}
运行效果如下图: