HTML5绘制基本形状1
郭亚东
(北京信息职业技术学院)
摘 要:本文档主要介绍画布结合绘制矩形和圆形的基本步骤和基本方法
关键词:.绘制矩形.绘制圆形
1 绘制矩形
画布结合可以绘制简单的矩形,还可以绘制一些其他的常见图形 如直线、圆等。
用和绘制矩形时,涉及到一个或多个方法,这些方法如表所示。
表绘制矩形的方法
方 法 功 能
绘制一个矩形,这个矩形区域没有边框,只有填充色。这个方法有个参数,前两
个表示左上角的坐标位置,第个参数为长度,第个参数为高度。
绘制一个带边框的矩形。该方法的个参数的解释同上。
清除一个矩形区域,被清除的区域将没有任何线条。该方法的 个参数的解释同
上。
案例:
!"
!"
"
! #$%&'($"
"绘制矩形)"
) "
*"
#$!+$#$*,-.$/ #$00$ 1 #$0$")"
#$-)2$"
#%!314!567$!+$8.
-#31+-7$9$8.
-3#$:;;00;;$.
-3700900008.
)"
)*"
) !"
上面的代码中,定义了一个画布对象,其id名称为myCanvas, 高度为150像素,宽度都为300像素,并定
义了画布边框的显示样式。代码中首先获取画布对象,然后使用getContext获取当前d的上下文对象,并使
1 / 5
HTML5 绘制基本形状 1