编程绘制五星红旗,
帆布绘图应用程序接口都没有定义在帆布元素本身上，而是定义在通过画布的getContext()方法获得的一个"绘图环境"对象上。
画布应用程序接口也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用beginPath()和弧形()方法。
一旦定义了路径，其他的方法，如fill()，都是对此路径操作。绘图环境的各种属性，比如fillStyle，说明了这些操作如何使用。
使用帆布画中国国旗，代码：
XML/HTML代码复制内容到剪贴板！文档类型HTML html头元字符集=UTF八号标题中国标准国旗/title/head body canvasid= canvas width= 600 height= 400 /canvas script type= text/JavaScript //使用HTML5绘制标准五星红旗var canvas=文档。getelementbyid(“canvas”)；var context=画布。获取上下文(“2d”)；var width=canvas . width var height=width * 2/3；varw=宽度/30;//小网格的宽context . fill style= red context . fill rect(0，0，width，height)；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=height*maxX，oy=height * maxycreate 5 star(context，ox，oy，height*maxR， #ff0 ，0)；//绘制五角星//画小for(varidx=0；idx 4 idx){ varsx=minX[idx]* height，sy=minY[idx]* height；var theta=数学。阿坦((oy-sy)/(ox-sx))；create5star(context，sx，sy，height*minR， #ff0 ，-Math ./2)；} //辅助线context.moveTo(0，height/2) context.lineTo(width，height/2)；语境。笔画()；context.moveTo(width/2，0)；context.lineTo(宽度/2,高度);语境。笔画()；//画网格，竖线for(varj=0；j15j ){ context.moveTo(j*w，0)；context.lineTo(j*w，height/2)；语境。笔画()；} //画网格，横线for(varj=0；j10j ){ context.moveTo(0，j * w)；context.lineTo(width/2，j * w)；语境。笔画()；} //画大圆语境。begin path()；context.arc(ox，oy，maxR*height，0，Math .PI*2，假);语境。关闭路径()；语境。笔画()；//画小圆for(varidx=0；idx4idx){ context。begin path()；varsx=minX[idx]*height，sy=minY[idx]* height；context.arc(sx，sy，height*minR，0，Math .PI*2，假);语境。关闭路径()；语境。笔画()；} //大圆中心与小圆中心连接线for(varidx=0；idx4idx ){ context.moveTo(ox，oy)；varsx=minX[idx]*height，sy=minY[idx]* height；context.lineTo(sx，sy)；语境。笔画()；} //绘制五角星/** *创建一个五角星形状。该五角星的中心坐标为(sx，sy)，中心到顶点的距离为半径，旋转=0时一个顶点在对称轴上*旋转：绕对称轴旋转辐状的弧度*/functioncreate5star(context，sx，sy，radius，color，rotato){ context。save()；context . fill style=color context . translate(sx，sy)；//移动坐标原点上下文.旋转(数学rotato)；//旋转语境。begin path()；//创建路径varx=数学。罪(0)；vary=数学。cos(0)；vardig=数学。/5 * 4;for(vari=0；i5；i ){//画五角星的五条边varx=数学。罪(我*挖)；vary=数学。cos(我*挖)；context.lineTo(x*radius，y * radius)；}上下文。关闭路径()；语境。笔画()；语境。fill()；语境。restore()；}/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。