-
画布API也使用路径表示。然而，路径是通过一系列的方法定义的调用而不是一串字母和数字，如调用调用（）和弧（）方法。
一旦路径的定义，其他的方法，如填充（），是这条路的行动，绘图环境的各种性能，如填充颜色，说明如何使用这些操作。
用画布绘制中国国旗，代号：
xml代码将内容复制到剪贴板。
中国标准的旗帜
使用HTML5标准图形标志
VaR的画布document.getelementbyid（画布）；
VaR上下文= canvas.getcontext（二维的）；
VaR的宽度= canvas.width；
var高度=宽度* 2 3；
宽度/ 30；小网格宽度
context.fillstyle =红色；
context.fillrect（0, 0，宽度，高度）；
VaR MAXR = 0.15，最小空间比率需求= 0.05； / /
VaR Maxx = 0.25，马克斯= 0.25； / /大五星的位置
VaR的疯丫头= { 0.50，0.60，0.60，0.50 }；
VaR迷你= { 0.10，0.20，0.35，0.45 }；
你画画
VaR牛=高度* Maxx、公司=高度*马克斯；
create5star（上下文、牛、公司、高* MAXR，# ff0
绘制小。
对于（var idx = 0；指数＜4；idx + +）{
VaR SX =疯丫头{ IDX } *高，SY =迷你{ IDX }×高度；
VaRθ= math.atan（（公司- SY）/（牛SX））；
create5star（上下文，SX，SY，高度最小空间比率需求，# ff0
}
/辅助行
context.moveto（0，身高 / 2）
Context.lineTo（宽度，高度 / 2）；
context.stroke（）；
Context.moveTo（宽/ 2, 0）；
Context.lineTo（宽/ 2、高度）；
context.stroke（）；
绘制网格线
对于（var j＝0；j＜15；j + +）{
context.moveto（J×W，0）；
context.lineto（J×W，身高 / 2）；
context.stroke（）；
}
画线/网格。
对于（var j＝0；j＜10；j + +）{
context.moveto（0，J×W）；
Context.lineTo（宽/ 2，J×W）；
context.stroke（）；
}
绘制圆圈
Context.beginPath（）；
context.arc（OX，OY，MAXR *高，0，math.pi×2，假）；
Context.closePath（）；
context.stroke（）；
圆形绘画
对于（var idx = 0；指数＜4；idx + +）{
Context.beginPath（）；
VaR SX =疯丫头{ IDX } *高，SY =迷你{ IDX }×高度；
context.arc（SX，SY，高度最小空间比率需求，0，math.pi×2，假）；
Context.closePath（）；
context.stroke（）；
}
大圆中心和圆心/连接线
对于（var idx = 0；指数＜4；idx + +）{
Context.moveTo（OX，OY）；
VaR SX =疯丫头{ IDX } *高，SY =迷你{ IDX }×高度；
Context.lineTo（SX，SY）；
context.stroke（）；
}
绘制/星形
*一个五角星形状的创建。五角星的中心坐标（SX，SY），之间的中心距离的顶点半径和旋转= 0是对称轴上的点。
*旋转：旋转弧绕对称轴旋转。
* /
功能create5star（上下文、SX、SY、半径、颜色、rotato）{
context.save（）；
context.fillstyle =颜色；
context.translate（SX，SY）； / /移动坐标原点
context.rotate（math.pi + rotato）； / /旋转
（上下文。调用）； / /创建一个路径
var x = Math.sin（0）；
var y = math.cos（0）；
VaR挖= math.pi / 5 * 4；
对于（var i = 0；i < 5；i++）{ / /五边画五角星
var x = Math.sin（我挖）；
var y = Math.cos（我挖）；
Context.lineTo（X×Y×半径，半径）；
}
Context.closePath（）；
context.stroke（）；
Context.fill（）；
context.restore（）；
}
以上是本文的全部内容，希望能对大家有所帮助。