js画布绘制矩形的方法

本文实例讲述了射流研究…画布绘制矩形的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title画布绘制矩形/title脚本类型='text/javascript '函数draw(id){ var canvas=document。getelementbyid(' canvas ')；if(canvas){ var context=canvas。get context(' 2d ')；context . fillstyle=' # ddddcontext . fill rect(0，0，400，400)；context . strokestyle=' black context . FillStyle=' gray context。线宽=5；context.fillRect(0，0，200，300)；context.strokeRect(0，0，200，200)；} else { return} }函数绘制边框(id){ var canvas=document。getelementbyid(' canvas 2 ')；if(canvas){ var context=canvas。get context(' 2d ')；context . FillStyle=' redcontext . strokestyle=' black context。线宽=5；context.fillRect(0，0，300，200)；context.strokeRect(0，0，300，200)；} else { return} }窗口。onload=function(){ draw(' canvas ')；绘制边框('画布2 ')；}/script/head dycanvas id=' canvas ' width=' 400 ' style=' background : red；'高度=' 400 '/canvashr/canvas id=' canvas 2 '宽度=' 400 '高度=' 400 '/画布/正文/html更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript动画特效与技巧汇总》 及《JavaScript运动效果与技巧汇总》

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