本文实例讲述了JavaScript html5画布绘制的小人效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

index.html代码如下：

！DOCTYPE html html head meta http-equiv=' Content-type ' Content=' text/html；charset=UTF-8' /标题画布中的缩放/title style type=' text/CSS ' # canvas { background : black；页边距-顶部：100像素；左边距left :200 px }/style/head body canvas id=' canvas ' width=' 500 px ' height=' 500 px '/canvas/body script type=' text/JavaScript ' src=' http : canvas。js '/script脚本类型=' text/JavaScript '缓存={ }；var offsetX=50，offsetY=20cache。context=dyl。创建上下文(“画布”)；dyl.rect(dyl.createColor()，60 offsetX，0 offsetY，185，100)；dyl.rect(dyl.createColor()、100 offsetX、100 offset、100、50)；dyl.rect(dyl.createColor()、20 offsetX、150 offsetY、260、200)；dyl.rect(dyl.createColor()，80 offsetX，350 offsetY，30，110)；dyl.rect(dyl.createColor()，190 offsetX，350 offsetY，30，110)；dyl.circle(dyl.createColor()，115 offsetX，55，20)；dyl.circle(dyl.createColor()，190 offsetX，55，20)；/script/htmlcanvas.js代码如下：

(function(){ var dyl={ cache : } }；dyl.setContext=函数(上下文){ dyl。缓存。_ context=上下文；返回上下文；}戴尔。getdom=function(id){返回文档。getelementbyid(id)；}戴尔. GetContext=function(){ return dyl。缓存。_上下文；}戴尔。save=function(){ var context=dyl ._ GetContext()；语境？语境。save(): void(0)；}戴尔。restore=function(){ var context=dyl ._ GetContext()；语境？语境。restore(): void(0)；}戴尔。create context=function(canvasID){ var canvas=this。getdom(canvasID)；if(！canvas){ return null；}返回戴尔。setcontext(画布。get context(' 2d ')；}戴尔。create COlOr=function(){ var COlOr=' RGB '；颜色=数学。圆(数学。random()* 255)；color='，'；颜色=数学。圆(数学。random()* 255)；color='，'；颜色=数学。圆(数学。random()* 255)；color=')'；返回颜色；};dyl.addImg=function(img，x，y) { var context=dyl ._ GetContext()；if(！img ||！上下文){ return } if(img==' string '的类型){ var oImg=new Image()；oImg.src=imgoImg。onload=function(){ context。绘制图像(oImg，x，y)；}返回；} context.drawImage(img，x，y)；};dyl.rect=函数（颜色、x、y、宽度、高度){ var context=dyl ._ GetContext()；if(！上下文){ return } context . fillstyle=color context . fill rect(x，y，宽度，高度);};dyl.circle=函数(颜色，x，y，r) { var context=dyl ._ GetContext()；语境。save()；context.fillStyle=colorcontext。begin path()；context.arc(x，y，r，0，2 *数学. PI)；语境。fill()；语境。笔画()；};dyl.scale=function(x，y) { var context=dyl ._ GetContext()；if(！上下文){退货} x=x？x : 1；y=y？y : 1；context.scale(x，y)；};if(！窗户。dyl){ window。dyl=dyl}})();更多关于射流研究…特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 、 《jQuery常见经典特效汇总》 及《JavaScript动画特效与技巧汇总》

希望本文所述对大家Java脚本语言程序设计有所帮助。