canvas入门（三）绘制代码分块

风舞红枫

已于 2022-01-27 16:47:02 修改

阅读量437

点赞数 2

CC 4.0 BY-SA版权

分类专栏： canvas 文章标签： javascript 前端 html5

于 2019-03-26 22:16:31 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42231248/article/details/88831972

canvas 专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas API绘制不同宽度与颜色的线条及正方形，并解释如何正确使用beginPath与closePath方法来隔离不同的绘制路径。

canvas入门系列

canvas入门（一）绘制线与正方形
 canvas入门（二）标签width与style:width的区别
 canvas入门（三）绘制代码分块
 canvas入门（四）绘制线的扩展api
canvas入门（五）贝塞尔曲线
 canvas入门（六）旋转、偏移、缩放
 canvas入门（七）中心旋转

hello,继续我们的canvas之旅,首先我们来绘制一条从(60,60)到(60,160)的一条绿色的width为6的直线

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
  <canvas></canvas>
</body>
<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.lineWidth = 6;
  context.strokeStyle = "green";
  context.moveTo(60, 60);
  context.lineTo(60, 130);
  context.stroke();
}
</script>
</html>

在这里插入图片描述
继续在原来的基础之上再绘制一条从(200,60)到(200,160)的一条红色的width为3的直线

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.lineWidth = 6;
  context.strokeStyle = "green";
  context.moveTo(60, 60);
  context.lineTo(60, 130);
  context.stroke();

  context.lineWidth = 3;
  context.strokeStyle = "red";
  context.moveTo(200, 60);
  context.lineTo(200, 130);
  context.stroke();
}
</script>
</html>

在这里插入图片描述
可以很明显的看到在原来的绿色的直线上也出现了红色部分,这当然不是我们想要的结果,为此canvas提供了新的方法
context.beginPath();
context.closePath();
从单词上面也可以看出是开启一个路径和关闭一个路径

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.lineWidth = 6;
  context.strokeStyle = "green";
  context.moveTo(60, 60);
  context.lineTo(60, 130);
  context.stroke();
  context.closePath();

  context.beginPath();
  context.lineWidth = 3;
  context.strokeStyle = "red";
  context.moveTo(200, 60);
  context.lineTo(200, 130);
  context.stroke();
  context.closePath();
}
</script>
</html>

在这里插入图片描述
这时候就可以看到了我们想要的结果
既然学会了直线，图形，线段颜色，那么接下来自然要做一些有颜色的图形

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.lineWidth = 6;
  context.strokeStyle = "green";
  context.fillStyle = "red";
  context.moveTo(60, 60);
  context.lineTo(60, 130);
  context.lineTo(130, 130);
  context.lineTo(130, 60);
  context.lineTo(60, 60);
  context.fill();
  context.stroke();
  context.closePath();
}
</script>
</html>

在这里插入图片描述
嘿,一个边框为绿色,内部为红色的正方形是不是就绘制好了,当然大家是不是发现正方形左上角没有连接起来，这个问题我们下一节会有所讲解。
大家也可以适当将上述代码fill()与stroke()绘制顺序翻一下，会有不一样的发现。
期待下一节再见…