html5新增标签：canvas

2023年4月7日 157次阅读 来源: 小早online

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

在html部分写如下代码，建议在标签之间加上一句“ 您的浏览器不支持canvas”，如果浏览器支持则之间渲染canvas，不会显示这句话。

<canvas id="canvas" width="300" height="300">
  您的浏览器不支持canvas
</canvas>

接下来，就都是在js中写的脚本了。

//first,获取画布
var canvas = document.querySelector("#canvas");
//second,获取绘制环境
var ctx = canvas.getContext("2d");

canvas的重要方法

  • moveTo(x,y)设置绘制线段的起点（用于表示一条新线的绘制）。
  • lineTo(x,y)绘制线段到制定点，如果上第一条线，可以不使用moveTo，直接使用lineTo，否则建议一律使用moveTo。
  • stroke() 描边（绘制）。
  • closePath()闭合路径，将当前正在绘制的路径闭合
  • fill() 填充
  • fillstyle 设置填充样式，同strokestyle
  • beginPath() 开始一条新路径的绘制
  • beginPath 与 closePath没有一丁点关系
  • fillRect(x,y,w,h)填充矩形
  • strokeRect(x,y,w,h)描边矩形
  • clearRect(x,y,w,h)擦除 指定的区域
  • rect(x,y,w,h)定义矩形路径
  • arc(cx,cy,radius,startAngle,endAngle[,是否逆时针])
    绘制圆弧
    cx | cy 圆心坐标
    radius 半径
    startRadian | endRadian 开始 | 结束 弧度
    -fillText(string,x,y)填充文字
    -strokeText(string,x,y)描边文字
    文字属性：
    font设置字体样式
    textAlign设置文字水平对齐方式
    textBaseline设置文字垂直对齐方式

cavas的常用属性

  • lineWidth 设置线宽 ctx.lineWidth =10
  • strokeStyle 设置描边样式 接收所有颜色类型
  • lineJoin 设置线段交汇处的样式
    bevel斜角
    round圆角
    miter尖角（默认）
  • lineCap设置线帽（只在断点处有效）butt无 默认 round 圆帽 square方帽

使用canvas做动画思路

通过定时器不断擦除，可以使用clearRect(x,y,w,h)方法。

入门canvas的例子

其中写了一个table坐标，帮助理解canvas的坐标点。

<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8">
<style type="text/css">
* {
          margin: 0;
          padding: 0;
      }
      canvas {
          box-shadow: 2px 2px 5px black;
          margin: 50px;
      }
      table {
          border-collapse: collapse;
          position: absolute;
          top: 50px;
          left: 50px;
      }
      table td {
          width: 49px;
          height: 49px;
          border: 1px dotted #ccc;
      }
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500">
您的浏览器不支持canvas
</canvas>
<table></table>
</body>
<script type="text/javascript">
//first,获取画布
var canvas = document.querySelector("#canvas");
//second,获取绘制环境
var ctx = canvas.getContext("2d");
ctx.lineTo(50,50);
ctx.lineTo(100,100);
ctx.stroke();
var table = document.querySelector("table");
  for (var i = 0; i < 10; i++) {
      var tr = document.createElement("tr");
      for (var j = 0; j < 10; j++) {
          var td = document.createElement("td");
          tr.appendChild(td);
      }
      table.appendChild(tr);
  }
</script>
</html>
    原文作者：小早online
    原文地址: https://www.jianshu.com/p/1aad2367beae
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞