HTML绘制带边框矩形

独的一个canvas标记只是在页面中定义了一块矩形区域，并无特别之处。开发人员只有配合使用javascript脚本，才能够完成各种图形、线条以及复杂的图形变换操作。与基于SVG实现同样绘图效果来比较，canvas绘图是一种像素级别的位图绘图技术，而SVG则是一种矢量绘图技术。

使用canvas和javascript绘制一个矩形，可能会涉及一个或多个方法，如下表所示：

（1）编写代码如下图所示，在<body>标签中加入以下代码。

（2）在浏览器中打开文件，预览效果图如下所示，可以看到网页中，在一个蓝色边框中显示了一个蓝色长方形。

小提示：上面代码中，首先定义一个画布对象，其id名称为myCanvas，其高度和宽度为500像素，并定义了画布边框显示样式。在javascript代码中，首先获取画布对象，然后使用getcontext获取当前2D的上下文对象。并使用fillrect绘制一个矩形。其中涉及一个fillstyle属性，fillstyle用于设置填充的颜色、透明度等。如果设置为“rgb（200,0,0）”，则表示一个颜色，不透明；如果设置为“rgba（0,0,200,0.5）”，则表示颜色为一个颜色，透明度为50%。

trokeRect(x,y,width,height) 只绘制边框但没有填充

strokeRect()与fillRect()参数都相同,只是fillRect()方法绘制的是填充颜色的矩形;而strokeRect()方法绘制的是只有边框的矩形。

实例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>绘制矩形</title>
<script type="text/javascript">
function drawRect(){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "006633";
ctx.strokeRect(200,50,100,80);
}
</script>
<style type="text/css">
myCanvas{border:1px solid black;}
</style>
</head>
<body>
<input type="button" value="绘制矩形" onclick="drawRect()"/><br />
<canvas id="myCanvas"></canvas>
</body>
</html>

绘制调色板

充矩形

<!DOCTYPE html>
<html>
<head>
<meta charset=" ">
<title>填充矩形</title>
<script type="text/javascript">
function draw(){
    var canvas = document.getElementById('myCanvas');
    if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    ctx.fillStyle = "rgba(0,0,200,0.5)";
    ctx.fillRect(50,30,150,75);
    }
}
</script>
<!--style标记内是CSS语法-->
<style type="text/css">
canvas { border: 1px solid black; } //将框线设为1px
</style>
</head>
<body onload="draw();">
<canvas id="myCanvas"></canvas>
</body>
</html>

canvas使用步骤说明：

1 <canvas>创建的绘图区一开始是空白的,首先需要使用JavaScript的getElementById获取DOM的canvas元素(element)。

var canvas = document.getElementById('myCanvas');

2 为了避免不支持canvas的浏览器运行JavaScript时出现错误,可以先用if条件测试是否能获取canvas的getContext方法

if(canvas.getContext){
//但getContext存在时,会运行这里的语句
}else{
//但getContext不存在时,会运行这里的语句
}

3 创建2d context对象

var ctx = canvas.getContext("2d');

4 使用fillStyle属性指定图形的颜色为红色

ctx.fillStyle = "#FF00000";
ctx.fillStyle = "rgba(0,0,200,0.5)";

5 fillRect属性用于绘制矩形并且指定绘制方向和大小

ctx.fillRect (0,0,150,75);

(0,0,150,75) 这4个数值分别代表矩形的起始点坐标(x,y),宽(width)和高(height)

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML绘制带边框矩形

您的项目需求