canvas入门(三)绘制代码分块

Canvas绘图基础
本文介绍如何使用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()绘制顺序翻一下,会有不一样的发现。
期待下一节再见…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风舞红枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值