canvas基础

微醉~

已于 2022-10-10 14:33:58 修改

阅读量748

点赞数

分类专栏：使用canvas的教程文章标签： javascript 前端 html

于 2022-10-10 11:30:05 首次发布

本文链接：https://blog.csdn.net/m0_63153901/article/details/127240360

版权

使用canvas的教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

canvas基础

基本使用

canvas是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。右边的图片展示了一些的实现示例，在这个教程后面我们将看到。

canvas本质上就是在页面上制作一个画布，使用js代码绘制图形、动画。

canvas标签

<canvas id="tutorial" width="150" height="150"></canvas>

canvas元素实际上和img元素很像，唯一的不同就是它没有src和alt属性。实际上canvas标签只有两个属性：width和height。这两个属性都属可选的，并且同样利用了DOM properties来设置。当没有设置宽高时，canvas会初始化宽度为300px、高度150px。该元素可以使用CSS来定义其大小，但是在绘制图象时会适应canvas框架的尺寸大小：如果CSS的尺寸与初始化不的比例不一致，图像会出现扭曲。

id属性并不是canvas元素特有的，而是每一个HTML元素都默认具有的属性（比如class属性）。在开发中常用id属性标识DOM元素使得我们可以快速地找到对应的元素。

canvas元素可以向任何一个普通的DOM元素一样被设计。然而，这些样式并不会影响canvas中的图像。

替换内容

canvas元素与img元素的不停指出在于，就像video、audio或者picture元素，很容易定义一些替代的内容。由于很多低版本浏览器（尤其是IE9以下版本）或者文本浏览器不支持HTML元素“canvas”，在这些浏览器你应该总是能展示替代内容。

简单理解为：我们只是在canvas标签中提供了替换内容。不支持canvas的浏览器将会忽略容器并在其中渲染后备内容。而支持canvas的浏览器将会忽略在容器中包含的内容，并且只是正常渲染 canvas。

例如：

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

注意：canvas是双标签结构，因此不能没有结束标签。

渲染上下文（The rendering context）

canvas创建了一个固定大小的画布，公开了一个或者多个渲染上下文，可以用来绘制和处理展示的内容。

简单理解就是canvas为我们提供了一个画板，我们需要作画需要用纸，渲染上下文类似于画板上面的纸。我们使用getContext()方法获取渲染上下文并且得到绘画功能。getContext()方法接收一个参数，即上下文的类型。对于2D图像而言，我们可以使用CanvasRenderingContext2D。

// 获取canvas元素
var canvas = document.getElementById('tutorial');
// 得到canvas上下文
var ctx = canvas.getContext('2d');

检查支持性

替换内容是用于在不支持canvas标签的浏览器中展示的。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码可以变成下面的样子：

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

一个简单的例子

<html>
 <head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>