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()绘制顺序翻一下，会有不一样的发现。
期待下一节再见…

猜你喜欢