canvas 绘制矩形

2018-8-10 00:27| 作者: admin| 查看: 1249| 评论: 0|来自: 蚂蚁部落

矩形是最为简单的图案一直,canvas提供了多种绘制方式。

特别说明:canvas没有内置绘制圆角矩形的方法,不过可以模拟实现。

本文不做介绍,具体参阅canvas 绘制圆角矩形一章节。

下面将通过代码实例介绍一下利用canvas如何绘制矩形图案。

一.lineTo()方法绘制矩形:

此方式在canvas 绘制直线一章节中有所涉及。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.moveTo(100, 100);
  ctx.lineTo(200, 100);
  ctx.lineTo(200, 200);
  ctx.lineTo(100, 200);
  ctx.lineTo(100, 100);
  //设置线条的宽度
  ctx.lineWidth = 10;
  //设置线条的填充颜色和透明度
  ctx.strokeStyle = 'rgba(255,0,0,0.5)';
  ctx.closePath();
  ctx.stroke();
    
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/20/134348eck59qon5jrr5woo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

绘制矩形的原理很简单,就是让直线首尾相接。

然后通过lineWidth设置边框的粗细,strokeStyle设置边框的颜色。

二.strokeRect()方法绘制矩形:

此方法可以绘制一个非填充的矩形。

语法结构:

[JavaScript] 纯文本查看 复制代码
ctx.strokeRect(10,10,100,100);

前两个参数规定矩形左上角的坐标,最后两个参数规定矩形的宽高。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.strokeRect(10,10,100,100);
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/20/135039r7gj5o2eo8jv2cjz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}


代码分析如下:

(1).绘制无填充的矩形,也就是只有边框,没有内部填充的矩形。

(2).没有使用stroke()方法,因为strokeRect()方法直接绘制矩形,能够自动开始并结束一条路径。

三.fillRect()方法绘制矩形:

此方法可以绘制一个填充的矩形。

语法结构:

[JavaScript] 纯文本查看 复制代码
ctx.fillRect(10,10,100,100);

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.fillStyle="#ccc";
  ctx.fillRect(10,10,100,100);
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/20/140236usg7idcqzagis9vz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).绘制一个带有填充的矩形。

(2).默认填充是纯很色,不过可以通过fillStyle属性修改。

(3).fillRect方法可以自动创建并结束一个路径。

四.rect()方法绘制矩形:

此方法也可以绘制矩形,与上面方法不同的是,它不能够自动绘制矩形并创建和结束路径。

所以如果描边,那么就调用stroke方法,如果需要填充,需要使用fill方法。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.rect(10, 10, 100, 100);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/20/140834owgsxbqy4x9p94z0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码绘制一个具有描边与填充的矩形。

fillStyle可以设置填充,strokeStyle可以设置描边。


鲜花

握手

雷人

路过

鸡蛋
返回顶部