使用HTML5画布API绘制弧线的教程
在开始之前,我们优化了映射环境,灵感来自于最后一个类的纹理。如果我不喜欢这个背景,我也提供其他背景图的图像目录下供大家选择。此外,所有的样式都写下来。
Javascript代码将内容复制到剪贴板。
A new canvas
体{背景:URL(, /图像/ BG3 .webp)重复;}
#帆布{ border: 1px solid # aaaaaa;显示:块;保证金:50px汽车;}
你的浏览器不支持画布让我们换一个!
在window.onload =函数(){
VaR的画布document.getelementbyid(画布);
canvas.width = 800;
canvas.height = 600;
VaR上下文= canvas.getcontext(2D);
context.fillstyle =# FFF;
(00800600)context.fillrect;
}
运行结果:
之所以要画一个空白矩形来填充画布,正如我们前面所说的,画布是透明的,如果你不设置背景色,那么它会覆盖我设置的纹理,你想用背景色(白色),只画一个矩形覆盖画布这个方法。
什么,很酷吗
用圆弧绘制圆弧()
ARC()的使用如下:
Javascript代码将内容复制到剪贴板。
context.arc(x,y,半径,startangle,EndAngle,逆时针)
三个参数是该中心的circle.startangle和EndAngle使用弧度值半径的中心,不是角度的弧度值。规则是绝对的,如下图所示。
逆时针代表绘图方法,顺时针或逆时针方向。它通过布尔值,true表示逆时针顺时针绘制渲染,和虚假的代表,和默认值为false。
的弧度的规则是绝对的,它的意思是什么这意味着你必须画出什么样的弧线,而弧线是直接根据上面的标准画出来的。
例如,你画0.5pi ~ 1PI,电弧如果顺时针,它是1 / 4圈的左下角,如果是逆时针方向,这是在右上角的3 / 4弧互补。试着在这里,没有更多的例子。
用切线来画弧线。
ArcTo()介绍:
的北极()方法接收5个参数,这是两个切点坐标和圆弧半径。这种方法是基于这是切线,弧线,弧线是由两切线的确定。
详情如下。
Javascript代码将内容复制到剪贴板。
北极(X1,Y1、X2,Y2,半径)
这个函数绘制一个给定半径的圆弧。圆弧的起点是切到当前路径线的点(x1,y1)。弧的终点是线的切线(x1,y1)到(x2,y2),它通常是一起使用MoveTo()或LineTo()。它的能力可以用一个更简单的圆弧代替(),它的复杂性是复杂的切线点的图的使用方法。
用切割点绘制弧线:
下面的例子,我画了切线,看得更清楚了。
Javascript代码将内容复制到剪贴板。
Arc line drawing
体{背景:URL(, /图像/ BG3 .webp)重复;}
#帆布{ border: 1px solid # aaaaaa;显示:块;保证金:50px汽车;}
你的浏览器不支持画布让我们换一个!
在window.onload =函数(){
VaR的画布document.getelementbyid(画布);
canvas.width = 800;
canvas.height = 600;
VaR上下文= canvas.getcontext(2D);
context.fillstyle =# FFF;
(00800600)context.fillrect;
DrawArcTo(200, 200, 600,200, 600, 400,100下,);
};
功能drawarcto(x0,y0,CXT,X1,X2,Y1,Y2,R){
Cxt.beginPath();
Cxt.moveTo(x0,y0);
Cxt.arcTo(X1,Y1、X2,Y2,R);
cxt.linewidth = 6;
cxt.strokestyle =红色;
Cxt.stroke();
Cxt.beginPath();
Cxt.moveTo(x0,y0);
Cxt.lineTo(x1,y1);
Cxt.lineTo (X2, Y2);
cxt.linewidth = 1;
cxt.strokestyle =# 0088aa ;
Cxt.stroke();
}
运行结果:
这种情况也说明对北极各关键点的作用()。为了更清晰的解释,我将注释分析图。
注意这里的北极出发点(x0,y0)是(),但(x0,y0)不一定是圆弧的切线。真正的北极()函数引入到(x1,y1)只和(x2,y2)。(x1,y1)称为控制点(x2,y2),而且是圆弧终点的切线点,它不一定是在电弧(x0,y0)。但必须在弧。
有一点点缠绕,然后我们改变了drawarcto参数()函数来测试。
(x2,y2)是不一定的弧线:
Javascript代码将内容复制到剪贴板。
DrawArcTo(200, 100, 600,100, 600, 400,400下,);
(x0,y0)必须在弧:
Javascript代码将内容复制到剪贴板。
DrawArcTo(400, 100, 600,100, 600, 400,400下,);
有趣的是,它连接的切入点(x0,y0),直接形成一个线段(x0,y0)通过良好的持续的电弧