【网络建设系统】
fiIIRect(x,y, weight, height)
其中的参数含义如下。
x，y：矩形左上角的坐标。
weight，height：矩形的宽度和高度。
说明：fillRect()方法使用fillStyle属性所指定的颜色、渐变和模式来填充指定盼矩形
(2)绘制矩形轮廓
strokeRect()方法用来绘制矩形的轮廓，语法格式为：
strokeRect(x,y, weight, height)
其中的参数含义如下。
x，y：矩形左上角的坐标。
weight，height：矩形的宽度和高度。
说明：strokeRect()方法按照指定的位置和大小绘制一个矩形的边框（但并不填充矩形的内部），线条颜色和线条宽度由strokeStyle和lineWidth属性指定。
【案例5-8]绘制填充的矩形和矩形轮廓。
【案例展示】本例文件5-8.html在浏览器中的显示效果如图5-9所示。
【学习目标】掌握绘制矩形的各种方法。
【知识要点】掌握绘制矩形的相关方法和属性。
代码如下：
<! doctype html>
<html>
<head>
<meta charset=”gb2312”>
<title>绘制矩形<／title>
<／head>
图5-9页面的显示效果
<body>
<canvas id="myCanvas" width="200" height="100" style="border:lpx solid #c3c3c3;">
您的浏览器不支持canvas元素．
</canvas>
<script type="text/j avascript">
var c=document.getElementById("myCanvas"); ／／获取画布对象
var cxt=c.getContext("2d"); ／／获取画布上绘图的环境
cxt.fillStyle="#ff0000”； ／／设置填充颜色
cxt.fillRect(0,0,100,50); ／／绘制填充矩形
cxt.strokeStyle="#OOOOff'’； ／／设置轮廓颜色
cxt.lineWidth="5"; ／／设置轮廓线条宽度
cxt.strokeRect(120,60,70,30); ／／绘制矩形轮廓
</script>
</body>
<[html>
【案例说明】本例中画布的边框采用CSS样式style="border:lpx solid #c3c3c3;”来实现，CSS样式将在本书的后续章节中讲解。（北京网站建设公司）
本文地址:
http://www.yishenzhou.com/yes/post/344.html | 分类:网站建设 |
次阅读
