可视化系列讲解：canvas的进阶使用（颜色和样式设置，绘制文本，绘制图片）

最新推荐文章于 2024-05-02 19:35:29 发布
最新推荐文章于 2024-05-02 19:35:29 发布
阅读量3.6k 收藏 8
点赞数 2
分类专栏： css canvas svg 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyuiba1314/article/details/128515451
版权
css 同时被 3 个专栏收录
7 篇文章 1 订阅
订阅专栏
canvas
6 篇文章 0 订阅
订阅专栏
svg
6 篇文章 0 订阅
订阅专栏

文章目录

一、Canvas的颜色和样式设置

1.1 颜色（不设置默认黑色）

◼ fillStyle = color： 设置图形的填充颜色，需在 fill() 函数前调用。
◼ strokeStyle = color： 设置图形轮廓的颜色，需在 stroke() 函数前调用。
◼ 一旦设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。
◼ 如果你要给图形上不同的颜色，需要重新设置 fillStyle 或 strokeStyle 的值。
填充颜色

<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')

      ctx.fillStyle = 'green'; // 不设置颜色时 默认为填充黑色（如果需要设置颜色，必须写在绘制元素的前面）
      ctx.fillRect(0, 0, 100, 50)
      ctx.fillStyle = 'red';
      ctx.fillRect(200, 0, 100, 50)
      
	  ctx.fillStyle = '#aaaaaa';
      ctx.beginPath()
      ctx.rect(0, 100, 100, 50)
      ctx.fill()
    }
  </script>
</body>
</html>

描边颜色

<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')

      ctx.strokeStyle = 'green'; // 不设置颜色时 默认为填充黑色（如果需要设置颜色，必须写在绘制元素的前面）
      ctx.strokeRect(0, 0, 100, 50)
      ctx.strokeStyle = 'red';
      ctx.strokeRect(200, 0, 100, 50)
      

      ctx.strokeStyle = 'skyblue';
      ctx.beginPath()
      ctx.rect(0, 100, 100, 50)
      ctx.stroke()
    }
  </script>
</body>
</html>

1.2 透明度 Transparent

◼ 除了可以绘制实色图形，我们还可以用 canvas 来绘制半透明的图形。
◼ 方式一：strokeStyle 和 fillStyle属性结合RGBA：
◼ 方式二：globalAlpha 属性（globalAlpha = 0 ~ 1，这个属性影响到 canvas 里所有图形的透明度 ， 有效的值范围是 0.0（完全透明）到 1.0（完全不透明），默认是 1.0。）

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')

      ctx.fillStyle = 'rgba(0, 255, 0, 0.3)'; // 不设置颜色时 默认为填充黑色（如果需要设置颜色，必须写在绘制元素的前面）
      ctx.fillRect(0, 0, 100, 50)
      ctx.fillStyle = 'rgba(255, 0, 0, 0.3)';
      ctx.fillRect(200, 0, 100, 50)
      

      ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';
      ctx.beginPath()
      ctx.rect(0, 100, 100, 50)
      ctx.fill()
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      // 全局透明度(针对canvas中所有的图形生效)
      ctx.globalAlpha = 0.3

      ctx.fillStyle = 'green';
      ctx.fillRect(0, 0, 100, 50)
      ctx.fillStyle = 'red';
      ctx.fillRect(200, 0, 100, 50)
      

      ctx.fillStyle = 'rgb(0, 0, 255)';
      ctx.beginPath()
      ctx.rect(0, 100, 100, 50)
      ctx.fill()
    }
  </script>
</body>
</html>

1.3 线型 Line styles

调用lineTo()函数绘制的线条，是可以通过一系列属性来设置线的样式。
◼ lineWidth = value： 设置线条宽度。（属性值必须为正数。默认值是 1.0px，不需单位。（ 零、负数、Infinity和NaN值将被忽略））
◼ lineCap = type： 设置线条末端样式。（type： butt 截断（默认），round 圆形， square 正方形）
◼ lineJoin = type： 设定线条与线条间接合处的样式。（type： round 圆形，bevel 斜角， miter 斜槽规（默认））
◼ …

1.3.1设置lineWidth
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      ctx.lineWidth = 10
      ctx.beginPath()
      ctx.moveTo(20, 20)
      ctx.lineTo(20, 100)
      ctx.closePath()
      ctx.stroke()
    }
  </script>
</body>
</html>

结合代码及上图：我们可以知道线宽是以原点向左右各取设置的宽度的一半的，这样当设置线宽为1的时候，你放大图形会发现，他会产生阴影，所以当设置为1时 你最好向下面代码那样设置
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      ctx.lineWidth = 1
      ctx.beginPath()
      ctx.moveTo(20.5, 20)
      ctx.lineTo(20.5, 100)
      ctx.closePath()
      ctx.stroke()
    }
  </script>
</body>
</html>

1.3.2设置lineCap和lineJoin
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      ctx.lineWidth = 10
      ctx.lineCap = 'round' //  butt 截断(默认)/round 圆形/square 正方形
      ctx.lineJoin = 'round' //  round 圆形/bevel 斜角/miter 斜槽规(默认)
      ctx.beginPath()
      ctx.moveTo(0, 0)
      ctx.lineTo(100, 100)
      ctx.lineTo(200, 0)
      ctx.stroke()
    }
  </script>
</body>
</html>

二、Canvas绘制文本

2.1 文本的样式（需在绘制文本前调用）

◼ font = value： 当前绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。默认的字体是：10px sans-serif。
◼ textAlign = value：文本对齐选项。可选的值包括：start, end, left, right or center. 默认值是 start
◼ textBaseline = value：基线对齐选项。可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。 默认值是 alphabetic。

2.2 fillText(text, x, y [, maxWidth])

◼ x, y：在 (x,y) 位置，填充指定的文本
◼ maxWidth：绘制的最大宽度（可选）。
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      
      ctx.font = '30px sen-serif'
      // 可打开 查看效果
      // ctx.textAlign = 'center'
      // ctx.textBaseline = 'middle'
      
  	  ctx.fillStyle = 'red'
      ctx.fillText('xt', 100, 100)
    }
  </script>
</body>
</html>

2.3 strokeText(text, x, y [, maxWidth])

◼ x, y：在 (x,y) 位置，填充指定的文本
◼ maxWidth：绘制的最大宽度（可选）。
在这里插入图片描述

// 将fillText换为strokeText   fillStyle 换strokeStyle 
// ctx.fillStyle = 'red'
// ctx.fillText('xt', 100, 100)
ctx.strokeStyle = 'red'
ctx.strokeText('xt', 100, 100)

三、Canvas绘制图片

3.1 绘制图片，可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态：

3.1.1 drawImage(image, x, y) ：其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标
3.1.2 drawImage(image, x, y, width, height)：这个方法多了 2 个参数：width 和 height，这两个参数用来控制 当向 canvas 画入时应该缩放的大小
3.1.3 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。

3.2 图片的来源，canvas 的 API 可以使用下面这些类型中的一种作为图片的源：

3.2.1 HTMLImageElement：这些图片是由Image()函数构造出来的，或者任何的元素。
3.2.2 HTMLVideoElement：用一个 HTML 的 元素作为你的图片源，可以从视频中抓取当前帧作为一个图像。
3.2.3 HTMLCanvasElement：可以使用另一个 元素作为你的图片源。
3.2.4 …
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      // 准备图片
      let image = new Image()
      image.src = '你自己的图片路劲'
      image.onload = function() {
        // 利用canvas绘制图片
        ctx.drawImage(image, 0, 0, 200, 200)

        // 在图片上绘制折线(如果出现层叠，后绘制的图形，会叠在前面的图形)
        ctx.beginPath()
        ctx.moveTo(40, 100)
        ctx.lineTo(50, 70)
        ctx.lineTo(60, 90)
        ctx.lineTo(100, 30)
        ctx.lineTo(170, 90)
        ctx.stroke()
      }
    }
  </script>
</body>
</html>

3.3 Canvas绘画状态-保存和恢复

3.3.1Canvas绘画状态
◼ 是当前绘画时所产生的样式和变形的一个快照。
◼ Canvas在绘画时，会产生相应的绘画状态，其实我们是可以将某些绘画的状态存储在栈中来为以后复用。
◼ Canvas 绘画状态的可以调用 save 和 restore 方法是用来保存和恢复，这两个方法都没有参数，并且它们是成对存在的。

3.3.2保存和恢复（Canvas）绘画状态
◼ save()：保存画布 (canvas) 的所有绘画状态
◼ restore()：恢复画布 (canvas) 的所有绘画状态

3.3.3保存和恢复（Canvas）绘画状态
◼ 当前应用的变形（即移动，旋转和缩放）
◼ 以及这些属性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit,
shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline …
◼ 当前的裁切路径（clipping path）

四、变形 Transform

◼ Canvas和CSS3一样也是支持变形，形变是一种更强大的方法，可以将坐标原点移动到另一点、形变可以对网格进行旋转和缩放
◼ Canvas的形变有4种方法实现：

  1. translate(x, y)：用来移动 canvas 和它的原点到一个不同的位置（x 是左右偏移量，y 是上下偏移量（无需要单位），）
  2. rotate(angle)：用于以原点为中心旋转 canvas，即沿着z轴旋转。（angle是旋转的弧度，是顺时针方向，以弧度为单位。）
  3. scale(x, y)：用来增减图形在 canvas 中像素数目，对图形进行缩小或放大。（x 为水平缩放因子，y 为垂直缩放因子。如果比 1 小，会缩小图形，如果比 1 大会放大图形。默认值为 1，也支持负数。）
  4. transform(a, b, c, d, e, f)： 允许对变形矩阵直接修改。这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵。
    ◼ 注意事项：
  5. 在做变形之前先调用 save 方法保存状态是一个良好的习惯
  6. 大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。
  7. 如果在一个循环中做位移但没有保存和恢复canvas状态，很可能到最后会发现有些东西不见了，因为它很可能已超出canvas画布
  8. 形变需要在绘制图形前调用。

4.1 移动-translate

可以看看如果我们不save初始状态 会发生什么？

<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      
      // 形变
      ctx.translate(100, 100)
      ctx.fillRect(0, 0, 100, 50)

      ctx.translate(100, 100)
      ctx.strokeRect(0, 0, 100, 50)
    }
  </script>
</body>
</html>

在这里插入图片描述
如果我们没在一开始（坐标原点为0,0时）保存状态，经过多次变化后，可能我们就很难找到坐标原点了

可以看看如果我们save初始状态 又会发生什么？

<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
      background-image: url(../images/grid.png);
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')

      // 先保存最开始的状态
      ctx.save()
      // 形变
      ctx.translate(100, 100)
      ctx.fillRect(0, 0, 100, 50)
      // 恢复到最开始的状态（原点没有改变时的状态）
      ctx.restore()

      ctx.save() // 形变前保存状态
      ctx.translate(100, 0)
      ctx.strokeRect(0, 0, 100, 50)
      ctx.restore()// 完成后恢复状态
    }
  </script>
</body>
</html>

在这里插入图片描述
可以看到我们保存了原点后，每次重新执行变化时我们就可以使用restore()方法，确保他的原点在0,0位置不变

4.2 旋转-rotate

◼ rotate方法，它用于以原点为中心旋转 canvas，即沿着 z轴 旋转。
rotate(angle)：

  1. 只接受一个参数：旋转的角度 (angle)，它是顺时针方向，以弧度为单位的值。
  2. 角度与弧度的 JS 表达式：弧度=( Math.PI / 180 ) * 角度 ，即 1角度 = Math.PI/180 个弧度。
  3. 旋转的中心点始终是 canvas 的原坐标点，如果要改变它，我们需要用到 translate方法。
<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')

      ctx.save() // 形变前保存状态
      // 形变
      ctx.translate(100, 100)
      ctx.rotate(Math.PI / 4)
      ctx.fillRect(0, 0, 50, 50)

      // 如果在这里形变（那么坐标原点就是100,100点）
      ctx.translate(100, 0)
      ctx.fillRect(0, 0, 50, 50)
      // 完成后恢复状态
      ctx.restore()

      // 如果在这里形变（那么坐标原点就是0,0点）（这就是使用save和restore的用途）
      // ctx.save() // 形变前保存状态
      // ctx.translate(100, 0)
      // ctx.fillRect(0, 0, 50, 50)
      // ctx.restore()// 完成后恢复状态
    }
  </script>
</body>
</html>

在这里插入图片描述

4.3 缩放-scale

scale方法可以缩放画布。可用它来增减图形在 canvas 中的像素数目，对图形进行缩小或者放大。
scale(x, y)： x 为水平缩放因子，y 为垂直缩放因子，也支持负数。如果比 1 小，会缩小图形，如果比 1 大会放大图形。默认值为 1。
◼ 注意事项

  1. 画布初始情况下，是以左上角坐标为原点。如果参数为负实数，相当于以 x 或 y 轴作为对称轴镜像反转。（如，使用translate(0, canvas.height); scale(1,-1); 以 y 轴作为对称轴镜像反转。）
  2. 默认情况下，canvas 的 1 个单位为 1 个像素。如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出
    来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。
<!DOCTYPE html>
<html lang="zh-CH">
<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>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')

      ctx.save() // 形变前保存状态
      // 形变
      ctx.translate(100, 100)
      ctx.scale(2, 2) // 对坐标轴放大2倍
      ctx.translate(10, 0) // 缩放后，10px 会变为 20px
      ctx.fillRect(0, 0, 50, 50)
      ctx.restore()// 完成后恢复状态
    }
  </script>
</body>
</html>

在这里插入图片描述

你的微笑暖暖的
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas样式和颜色
大白兔
10-25 1万+
color（颜色） fillStyle = color; // 设置图形的填充颜色 stokeStyle = color; // 设置图形的轮廓颜色 transparency（透明度） line styles（线型） gradient（渐变） patterns（图案样式） shadows（阴影） canvas填充规则 ...
Canvas画文本时设置某些文本颜色与其他不同
Come丶On
05-09 7594
效果图 直接看效果图 分析一波 就是控件下面的一行文本，用canvas画出来，而不是用TextView(当然你用TextView也是可以实现的，本文不做讨论)。 我们用canvas画文本的方法是drawText(@NonNull String text, float x, float y, @NonNull Paint paint)，简单介绍一下这个方法穿的参数值，text：要画的文本，x：起点...
学习HTML5 Canvas这一篇文章就够了_html5canvas
最新发布
2401_84437530的博客
05-02 795
​ 贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。​ 一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。​ 贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。
Canvas色彩颜色
weixin_44966759的博客
09-22 1278
色彩 fillStyle和strokeStyle fillStyle=color 设置填充形状时使用的样式 strokeStyle=color 设置形状轮廓时填充的样式 color与css中的color一样 注意:这两个颜色设置一次后其后面的颜色默认是设置的颜色除非重新更改 ctx.fillStyle = 'orange'; ctx.fillStyle = '#FFA500'; ctx.fillStyle = 'rgb(255, 165, 0)'; ctx.fillStyle = 'rgba(255, 16
Canvas——样式和颜色控制
mantou_riji的博客
01-14 2537
x1,y1,r1表示以(x1,y1)为坐标r1为半径的圆，x2,y2,r2表示以(x2,y3)为坐标r2为半径的圆。// x1,y1,r1表示以(x1,y1)为坐标r1为半径的园，x2,y2,r2表示以(x2,y3)为坐标r2为半径的原。// createLinearGradient(x1,y1,x2,y2)， x1\y1渐变的起点，x2\y2渐变的终点。// createConeGradient(r,x1,y1):r：开始渐变的角度，x1，y1渐变旋转的圆心。// 获取画笔(这里是2d画笔)
JavaScript通过canvas绘制可以自定义颜色、文字效果的动态环形进度条
qq_40386177的博客
05-19 1271
早些时候写过的一个大屏项目，环形进度条是使用css来实现的，但为避免一下样式问题，使用现在尝试对以前的功能进行修改，使用canvas进行绘制，并能自定义颜色和文字样式。height100px
微信小程序学习用demo：使用canvas绘制雷达图
03-15
在这个“微信小程序学习用demo：使用canvas绘制雷达图”项目中，我们将探讨如何利用微信小程序的框架和HTML5的Canvas API来创建一个动态的雷达图。 首先，微信小程序的开发涉及的主要知识点包括： 1. **微信小程序...
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
10-17
主要介绍了Vue使用Canvas绘制图片、矩形、线条、文字，下载图片的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
详解canvas在圆弧周围绘制文本的两种写法
09-28
**第一种方法：使用弧度绘制文本** 该方法的核心是计算每个字符在圆弧上的位置。首先，我们确定圆的中心点`circle.x`和`circle.y`以及半径`circle.radius`。然后，定义一个`drawCircularText`函数，它接受字符串、...
Android 使用Canvas在图片上绘制文字的方法
08-28
CSDN_Android_Canvas绘制文字 Android 使用Canvas在图片上绘制文字...以上是Android 使用Canvas在图片上绘制文字的方法，包括字体设置、字体风格设置、绘图过程中字体设置、Paint常用方法和图片上绘制文字的实现方法。
html5使用canvas绘制一张图片
09-28
Canvas提供了`drawImage()`方法，用于将图像（包括图片、画布或视频）绘制到画布上。下面将详细阐述这一过程及其相关知识点。 首先，我们需要在HTML中创建一个`<canvas>`元素。这是一个具有特定`width`和`height`...
canvas--初识canvs、绘制：线型、简单图形、渐变背景颜色、绘制动画、canvs形变、事件绑定
小白小白从不日别的博客
07-16 3685
目录 一、初识canvas 1.1 基本使用 1.2 示例 1.1 注意点 二、canvas线条相关属性 2.1 常用属性 2.2 示例 2.3 绘制多根线条 c.示例： 三、canvas绘制简单图形 3.1 绘制三角形 3.2 路径绘制 3.3 矩形绘制 3.4 绘制虚线 3.5 绘制表格 3.6 绘制坐标系 3.7 绘制数据点 3.8 绘制折线图 3.9 绘制柱状图 四、渐变背景颜色 4.1 设置图形渐变背景颜色步骤 4.2 绘制圆弧 4.3 绘制饼状...
H5 Canvas fillColor and fillRect
修也
05-25 752
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .c1 { width:...
canvas设置颜色及线条样式
热门推荐
星星有所不知
03-21 2万+
canvas设置颜色及线条样式1. canvas设置颜色2. canvas设置线条样式 1. canvas设置颜色 fillStyle = color; //设置图形的填充颜色 strokeStyle = color; //设置图形轮廓的颜色 color可以是表示css颜色值的字符串，渐变对象或者图案对象，color默认为黑色 globalAlpha = 透明度（0-1）//设置透明度，有效范围...
python ttk 创建窗口无法改变Canvas画布背景颜色
m0_46935103的博客
10-25 442
后面，删除label标签，才成功改变画布背景色，问题就在ttk创建的标签上了。最后只好舍弃美丽的外观，追求实际作用了。我直接用回tk.Label()创建标签，问题才解决，不过，界面的确差多了。ttk.Canvas也能够创建画布，但我不知道怎么改变颜色，就只能用tk.Canvas 创建了，然后发现还是改不了颜色。不知道大佬们有没有什么办法，实现，tkinter使用ttk创建窗口的情况下，实现Canvas的背景色修改呢？
canvas详解02-样式和颜色控制
大雾起了清晨
06-23 3344
在绘制图形的章节里，我只用到默认的线条和填充样式。而在这一章里，我们将会探讨 canvas 全部的可选项，来绘制出更加吸引人的内容。
Canvas如何设置和调整线条样式？
zy1992As的博客
10-30 317
在Canvas中，线的默认颜色为黑色，宽度为lpx，但我们可以使用相关属性为线添加不同的样式。使用strokeStyle属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色的英文名。使用lineWidth属性可以定义线的宽度，该属性的取值为数值(不带单位)，以像素为计量。上述代码中，第15行代码设置了线的宽度为10像素：第16行代码设置了线的颜色为红色;了解了设置线的样式的基本方法后，下面演示如何为线设置样式。在上述代码中，两种方式都可以用于设置线的描边颜色为红色。上述代码中设置了线的宽度为10。
ecahrts 散点图根据数据不同在地图上显示不同的颜色
workhard0905的博客
03-06 1371
根据需求 要根据接口返回数据的不同 在地图上行显示不同的圆柱以及波浪 本来是想在color中使用回调 根据数据返回不同的颜色 但是在color属性中 使用回调函数发现不起作用 而且没有进入回调函数中 查询文档发现 在type为lines scatter efferctScatter类型的series中的data属性 以type='lines'为例 data属性中有个lineStyle的属性 可以根据单个数据设置样式 return data.map(item => { r..
Canvas 添加加样式&&颜色（细解）
IT_qslong的博客
09-23 948
加样式和颜色 色彩Colors fillStyle = color 设置图形的填充颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function draw() { var ctx = document.getEl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值