帆布绘图应用程序接口都没有定义在帆布元素本身上，而是定义在通过画布的getContext()方法获得的一个"绘图环境"对象上。

画布应用程序接口也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用beginPath()和arc()方法。

一旦定义了路径，其他的方法，如fill()，都是对此路径操作。绘图环境的各种属性，比如fillStyle，说明了这些操作如何使用。

使用帆布画中国国旗，代码：

XML/HTML代码复制内容到剪贴板

！DOCTYPEHTML

超文本标记语言

头

' UTF-8 '

标题中国标准国旗/title

/head

身体

canvasid=' canvas ' width=' 600 ' height=' 400 '/canvas

scripttype='text/javascript '

//使用HTML5绘制标准五星红旗

var canvas=文档。getelementbyid(' canvas ')；

var context=canvas。GetContext(' 2d ')；

varwidth=canvas.width

var height=width * 2/3；

varw=宽度/30;//小网格的宽

context.fillStyle=' red

context.fillRect(0，0，宽度，高度);

varmaxR=0.15，minR=0.05//

varmaxX=0.25，maxY=0.25//大五星的位置

varminX=[0.50，0.60，0.60，0.50]；

varminY=[0.10，0.20，0.35，0.45]；

//画大

varox=高度*maxX，oy=高度* maxY

create5star(context，ox，oy，height*maxR，' #ff0 '，0)；//绘制五角星

//画小

for(varidx=0；idx4idx ){

varsx=MinX[idx]*高度，sy=MinY[idx]*高度；

var theta=数学。atan((oy-sy)/(ox-sx))；

create5star(context，sx，sy，height*minR，' #ff0 '，-Math .PI/2)；

}

//辅助线

context.moveTo(0，height/2)

context.lineTo(宽，高/2);

背景。stroke()；

context.moveTo(width/2，0)；

context.lineTo(width/2，height)；

背景。stroke()；

//画网格，竖线

for(varj=0；j15j ){

context.moveTo(j*w，0)；

context.lineTo(j*w，height/2)；

背景。stroke()；

}

//画网格，横线

for(varj=0；j10j ){

context.moveTo(0，j * w)；

context.lineTo(width/2，j * w)；

背景。stroke()；

}

//画大圆

背景。begin path()；

context.arc(ox，oy，maxR*height，0，Math .PI*2，假);

背景。ClosePath()；

背景。stroke()；

//画小圆

for(varidx=0；idx4idx ){

背景。begin path()；

varsx=MinX[idx]*高度，sy=MinY[idx]*高度；

context.arc(sx，sy，height*minR，0，Math .PI*2，假);

背景。ClosePath()；

背景。stroke()；

}

//大圆中心与小圆中心连接线

for(varidx=0；idx4idx ){

context.moveTo(ox，oy)；

varsx=MinX[idx]*高度，sy=MinY[idx]*高度；

context.lineTo(sx，sy)；

背景。stroke()；

}

//绘制五角星

/**

*创建一个五角星形状。该五角星的中心坐标为(sx，sy)，中心到顶点的距离为半径，旋转=0时一个顶点在对称轴上

*rotate:绕对称轴旋转辐状的弧度

*/

functioncreate5star(context，sx，sy，radius，color，rotate ){

背景。save()；

context.fillStyle=color

context.translate(sx，sy)；//移动坐标原点

上下文。旋转（数学. PI rotato)；//旋转

背景。begin path()；//创建路径

varx=数学。sin(0)；

vary=数学。cos(0)；

vardig=数学/5 * 4；

for(vari=0；i5；i ){//画五角星的五条边

varx=数学。罪恶(我*挖)；

vary=数学。cos(我*挖)；

背景。LineTo(x *半径，y *半径);

}

背景。ClosePath()；

背景。stroke()；

背景。fill()；

背景。restore()；

}

/script

/body

/html