当前位置：网站首页>cavans图形绘制

cavans图形绘制

2022-08-07 01:46:00 【好奇的菜鸟】

一、绘制直线

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas</title>
</head>

<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #753838;">您的浏览器不支持HTML5 canvas</canvas>
</body>
<script>
  <!--  获取绘制元素-->
  var c = document.getElementById("myCanvas");
  //获取cavas绘制上下文
  var ctx = c.getContext("2d");
  //设置直线起点
  //定义开始坐标
  ctx.moveTo(0, 0);
  //定义结束坐标
  ctx.lineTo(200, 200)
  //设开始绘制
  ctx.stroke();
</script>
</html>

二、绘制多条直线(线帽)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas</title>
</head>

<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #753838;">您的浏览器不支持HTML5 canvas</canvas>
</body>
<script>
  <!--  获取绘制元素-->
  var c = document.getElementById("myCanvas");
  //获取cavas绘制上下文
  var ctx = c.getContext("2d");
  //开始绘制
  ctx.beginPath();
  //设置线宽
  ctx.lineWidth = 10;
  //设置联调端点样式，默认值添加平直边缘
  ctx.lineCap = "butt";
  //设置起点
  ctx.moveTo(20, 20);
  //设置终点
  ctx.lineTo(180, 20)
  //绘制
  ctx.stroke();

  ctx.beginPath();
  //设置联调端点样式，添加圆形边缘
  ctx.lineCap = "round";
  ctx.moveTo(20, 40);
  ctx.lineTo(180, 40);
  ctx.stroke();

  ctx.beginPath();
  //设置联调端点样式，添加方形边缘
  ctx.lineCap = "square";
  ctx.moveTo(20, 60);
  ctx.lineTo(180, 60);
  ctx.stroke();
</script>
</html>

 

原网站

版权声明
本文为[好奇的菜鸟]所创，转载请带上原文链接，感谢
https://yjtzfywh.blog.csdn.net/article/details/126182267

边栏推荐

猜你喜欢

随机推荐