当前位置：
  1. 首页
  2. 互联网
  3. 正文
本文介绍: Canvas详细使用

Canvas

Canvas的注意事项

< canvas > 和 < img > 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。
-< canvas &gt; 标签只有两个属性——width和height( 单位默认为px )。当没有设置宽度和高度时，canvas 会初始化宽为
300px 和高为 150px。

Canvas Grid 和 坐标空间

Canvas Grid 或 坐标空间

在这里插入图片描述

绘制矩形( Rectangle )

Canvas支持两种方式来绘制矩形：矩形方法 和 路径方法。

认识路径

什么是路径？

路径-绘制直线

移动画笔（moveTo）方法

路径-绘制三角形( Triangle )

绘制一个三角形步骤

路径-绘制圆弧（Arc）、圆 ( Circle)

绘制圆弧或者圆，使用arc()方法。

路径-矩形（Rectangle）

绘制矩形的另一个方法：

在这里插入图片描述

<!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>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }
    canvas{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>

  <canvas id="tutorial" width="300" height="300px">
    你的浏览器不兼容Canvas,请升级您的浏览器!
  </canvas>

  <script>
    window.onload = function() {
      let canvasEl = document.getElementById('tutorial')
      if(!canvasEl.getContext){
        return
      }
      let ctx = canvasEl.getContext('2d') // 2d | webgl
      
      // 1.创建一个路径
      ctx.beginPath()
      // 2.绘图指令
      // ctx.moveTo(0, 0)
      ctx.rect(100, 100, 100, 50)
      // 3.闭合路径
      ctx.closePath()
      // 4.填充和描边
      ctx.stroke()
      
    }
  </script>
</body>
</html>

色彩 Colors

如果我们想要给图形上色，有两个重要的属性可以做到：

在这里插入图片描述

<!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>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }
    canvas{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>

  <canvas id="tutorial" width="300" height="300px">
    你的浏览器不兼容Canvas,请升级您的浏览器!
  </canvas>

  <script>
    window.onload = function() {
      let canvasEl = document.getElementById('tutorial')
      if(!canvasEl.getContext){
        return
      }
      let ctx = canvasEl.getContext('2d') // 2d | webgl
      
      // 2.修改画笔的颜色
      ctx.fillStyle = 'red'
      ctx.fillRect(0,0, 100, 50) // 单位也是不用写 px

      ctx.fillStyle = '#cdcdcd'
      ctx.fillRect(200, 0, 100, 50)

      ctx.fillStyle = 'green'
      ctx.beginPath()
      ctx.rect(0, 100, 100, 50)
      ctx.fill()

    }
  </script>
</body>
</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>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }
    canvas{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>

  <canvas id="tutorial" width="300" height="300px">
    你的浏览器不兼容Canvas,请升级您的浏览器!
  </canvas>

  <script>
    window.onload = function() {
      let canvasEl = document.getElementById('tutorial')
      if(!canvasEl.getContext){
        return
      }
      let ctx = canvasEl.getContext('2d') // 2d | webgl
      
      // 2.修改画笔的颜色
      ctx.fillStyle = 'rgba(255, 0, 0, 0.3)'
      ctx.fillRect(0,0, 100, 50) // 单位也是不用写 px

      ctx.strokeStyle = 'blue'
      ctx.strokeRect(200, 0, 100, 50)

      ctx.strokeStyle = 'green' // 关键字, 十六进制, rbg , rgba
      ctx.beginPath()
      ctx.rect(0, 100, 100, 50)
      ctx.stroke()

    }
  </script>
</body>
</html>

透明度 Transparent

除了可以绘制实色图形，我们还可以用 canvas 来绘制半透明的图形。

在这里插入图片描述

<!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>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }
    canvas{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>

  <canvas id="tutorial" width="300" height="300px">
    你的浏览器不兼容Canvas,请升级您的浏览器!
  </canvas>

  <script>
    window.onload = function() {
      let canvasEl = document.getElementById('tutorial')
      if(!canvasEl.getContext){
        return
      }
      let ctx = canvasEl.getContext('2d') // 2d | webgl
      
      // 针对于Canvas中所有的图形生效
      ctx.globalAlpha = 0.3

      // 2.修改画笔的颜色
      // ctx.fillStyle = 'rgba(255, 0, 0, 0.3)'
      ctx.fillRect(0,0, 100, 50) // 单位也是不用写 px

      ctx.fillStyle = 'blue'
      ctx.fillRect(200, 0, 100, 50)

      ctx.fillStyle = 'green' // 关键字, 十六进制, rbg , rgba
      ctx.beginPath()
      ctx.rect(0, 100, 100, 50)
      ctx.fill()

    }
  </script>
</body>
</html>

线型 Line styles

调用lineTo()函数绘制的线条，是可以通过一系列属性来设置线的样式。

  • lineWidth = value： 设置线条宽度。
  • lineCap = type： 设置线条末端样式。
  • lineJoin = type： 设定线条与线条间接合处的样式。
  • …
    lineWidth
  • 设置线条宽度的属性值必须为正数。默认值是 1.0px，不需单位。（ 零、负数、Infinity和NaN值将被忽略）
  • 线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。
  • 如果你想要绘制一条从 (3,1) 到 (3,5)，宽度是 1.0 的线条，你会得到像第二幅图一样的结果。
    • 路径的两边个各延伸半个像素填充并渲染出1像素的线条（深蓝色部分）
    • 两边剩下的半个像素又会以实际画笔颜色一半色调来填充（浅蓝部分）
    • 实际画出线条的区域为（浅蓝和深蓝的部分），填充色大于1像素了，这就是为何宽度为 1.0 的线经常并不准确的原因。

要解决这个问题，必须对路径精确的控制。如，1px的线条会在路径两边各延伸半像素，那么像第三幅图那样绘制从 (3.5 ,1) 到 (3.5,
5) 的线条，其边缘正好落在像素边界，填充出来就是准确的宽为 1.0 的线条。
在这里插入图片描述
在这里插入图片描述

<!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>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }
    canvas{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>

  <canvas id="tutorial" width="300" height="300px">
    你的浏览器不兼容Canvas,请升级您的浏览器!
  </canvas>

  <script>
    window.onload = function() {
      let canvasEl = document.getElementById('tutorial')
      if(!canvasEl.getContext){
        return
      }
      let ctx = canvasEl.getContext('2d') // 2d | webgl
      ctx.lineWidth = 2

      ctx.beginPath()
      ctx.moveTo(20, 20)
      ctx.lineTo(20, 100)
      ctx.stroke()

      
    }
  </script>
</body>
</html>

原文地址:https://blog.csdn.net/weixin_65402230/article/details/129459914

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_34520.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 【CSS知识点】——display属性详解
下一篇 CSS全屏红色告警 边缘红色渐变闪烁 全屏告警效果

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。