【网络建设系统】按照指定的位置和大小绘制一个矩形的边框 -网络营销推广_网站建设设计

【网络建设系统】按照指定的位置和大小绘制一个矩形的边框

发表日期：2018-11-12 17:19:22

【网络建设系统】

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>

<／head>

图5-9页面的显示效果

<body>

您的浏览器不支持canvas元素．

</canvas>

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样式将在本书的后续章节中讲解。（北京网站建设公司）

400-611-0508

全方位的营销咨询
精准的解决方案
一对一贴心服务