canvas的api的学习（一）

前端老鸟

发布于 2019-08-01 15:21:10

4060

发布于 2019-08-01 15:21:10

文章被收录于专栏：front-end technology

简介

Canvas是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用

的二维API，通过一套完整的绘图函数来动态生成图形。

Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持Canvas, Internet Explorer 从IE9开始支持。Chrome和Opera 9+ 也支持。

canvas的基本使用

1.canvas标签使用

<canvas id="target" width="300px" height="150px">
  不支持canvas标签会显示该内容
</canvas>

2.canvas方法检查

var canvas = document.getElement('target')
if (canvas.getContext) {
  var ctx = canvas.getContent('2d')
} else {
  console.log('该浏览器版本过低，请更换')
}

3.canvas绘制图形

canvas的api

moveTo( x, y ) 将笔触移动到指定的坐标(x,y)

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();
  </script>

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

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(300,150); // lineTo
    ctx.stroke();
  </script>

fill() 填充当前绘图（路径）

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.fillStyle="red";
    ctx.fill();
  </script>

stroke() 绘制已定义的路径

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.lineTo(70,100);
    ctx.strokeStyle="green";
    ctx.stroke();
  </script>

beginPath() 起始（重置）当前路径

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth="5";
    ctx.strokeStyle="red"; // 红色路径
    ctx.moveTo(0,75);
    ctx.lineTo(250,75);
    ctx.stroke(); // 进行绘制

    ctx.beginPath();
    ctx.strokeStyle="blue"; // 蓝色路径
    ctx.moveTo(50,0);
    ctx.lineTo(150,130);
    ctx.stroke(); // 进行绘制
  </script>

closePath() 结束当前路径

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

  var c=document.getElementById("canvas");
  var ctx=c.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(20,20);
  ctx.lineTo(20,100);
  ctx.lineTo(70,100);
  ctx.closePath();
  ctx.stroke();

</script>

clip() 从原始画布剪切任意形状和尺寸的区域

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    // 剪切矩形区域
    ctx.rect(50, 20, 200, 120);
    ctx.stroke();
    ctx.clip();
    // 在 clip() 之后绘制绿色矩形
    ctx.fillStyle="black";
    ctx.fillRect(0, 0, 150, 100);
  </script>

rect( x, y, width, height ) 绘制矩形

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的浏览器不支持 HTML5 canvas 标签。
  </canvas>

  <script>
    var c = document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.stroke();
  </script>

fillRect( x, y, width, height ) 绘制被填充的矩形

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
  var c = document.getElementById("canvas");
  var ctx=c.getContext("2d");
  ctx.fillRect(100, 30, 150, 100);
</script>

strokeRect( x, y, width, height ) 绘制矩形（无填充）

  <canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
  var c=document.getElementById("canvas");
  var ctx=c.getContext("2d");
  ctx.strokeRect(20, 20, 150, 100);
  </script>

clearRect( x, y, width, height ) 清除指定的矩形内的像素

<canvas id="canvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(0,0,300,150);
    ctx.clearRect(20,20,100,50);