canvas初识笔记

最新推荐文章于 2024-10-30 19:10:39 发布

huohuoit

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量128

点赞数

分类专栏： Canvas 文章标签： html5 javascript

本文链接：https://blog.csdn.net/huohuoit/article/details/108197206

版权

Canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、基本用法

1、<canvas>元素

（1）元素类比：<img> ，唯一的不同就是它并没有 src 和 alt 属性

（2）只有两个属性：width height (初始默认 300px * 150px)

（3）注意：如果你绘制出来的图像是扭曲的, 尝试用width和height属性为<canvas>明确规定宽高，而不是使用CSS。

（4）其他：给每个标签都加上一个id属性是个好主意，因为这样你就能在我们的脚本中很容易的找到它。当开始时没有为canvas规定样式规则，其将会完全透明。

（5）替换内容：类似<video>，<audio>，或者 <picture>元素

（6）</canvas>标签不可省：如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

2、渲染上下文

<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。

getContext() 的方法：获得渲染上下文和它的绘画功能（只有一个参数，上下文的格式）

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

3、检查支持性

测试getContext()方法的存在即可

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

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

4、模板骨架

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

draw()的函数：当页面加载结束的时候就会执行这个函数。

二、绘制形状

1、栅格

canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。

2、绘制矩形

</canvas>只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）

三种方法：

fillRect(x, y, width, height)：绘制一个填充的矩形

strokeRect(x, y, width, height)：绘制一个矩形的边框

clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明

3、绘制路径

路径绘制图形需要额外的步骤：

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

所用函数：

beginPath()：新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()：闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()：通过线条来绘制图形轮廓。
fill()：通过填充路径的内容区域生成实心的图形。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}

moveTo(x, y)：将笔触移动到指定的坐标x以及y上（一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程，实际上并不能画出任何东西）

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
    ctx.stroke();
  }
}

lineTo(x, y):绘制一条从当前位置到指定x以及y位置的直线

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');

  // 填充三角形
  ctx.beginPath();
  ctx.moveTo(25, 25);
  ctx.lineTo(105, 25);
  ctx.lineTo(25, 105);
  ctx.fill();

  // 描边三角形
  ctx.beginPath();
  ctx.moveTo(125, 125);
  ctx.lineTo(125, 45);
  ctx.lineTo(45, 125);
  ctx.closePath();
  ctx.stroke();
  }
}

路径使用填充（fill）时，路径自动闭合，使用描边（stroke）则不会闭合路径。如果没有添加闭合路径closePath()到描述三角形函数中，则只绘制了两条线段，并不是一个完整的三角形。

arc(x, y, radius, startAngle, endAngle, anticlockwise):x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:弧度=(Math.PI/180)*角度。