在开始之前，我们优化了映射环境，灵感来自于最后一个类的纹理。如果我不喜欢这个背景，我也提供其他背景图的图像目录下供大家选择。此外，所有的样式都写下来。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
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（）的使用如下：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
context.arc（x，y，半径，startangle，EndAngle，逆时针）
三个参数是该中心的circle.startangle和EndAngle使用弧度值半径的中心，不是角度的弧度值。规则是绝对的，如下图所示。
逆时针代表绘图方法，顺时针或逆时针方向。它通过布尔值，true表示逆时针顺时针绘制渲染，和虚假的代表，和默认值为false。
的弧度的规则是绝对的，它的意思是什么这意味着你必须画出什么样的弧线，而弧线是直接根据上面的标准画出来的。
例如，你画0.5pi ~ 1PI，电弧如果顺时针，它是1 / 4圈的左下角，如果是逆时针方向，这是在右上角的3 / 4弧互补。试着在这里，没有更多的例子。
用切线来画弧线。
ArcTo（）介绍：
的北极（）方法接收5个参数，这是两个切点坐标和圆弧半径。这种方法是基于这是切线，弧线，弧线是由两切线的确定。
详情如下。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
北极（X1，Y1、X2，Y2，半径）
这个函数绘制一个给定半径的圆弧。圆弧的起点是切到当前路径线的点（x1，y1）。弧的终点是线的切线（x1，y1）到（x2，y2），它通常是一起使用MoveTo（）或LineTo（）。它的能力可以用一个更简单的圆弧代替（），它的复杂性是复杂的切线点的图的使用方法。
用切割点绘制弧线：
下面的例子，我画了切线，看得更清楚了。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
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）是不一定的弧线：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
DrawArcTo（200, 100, 600，100, 600, 400，400下，）；
（x0，y0）必须在弧：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
DrawArcTo（400, 100, 600，100, 600, 400，400下，）；
有趣的是，它连接的切入点（x0，y0），直接形成一个线段（x0，y0）通过良好的持续的电弧
