Canvas

2017-12-31 本文已影响15人 bowen_wu

<canvas>：用于通过使用 JavaScript 中的脚本来绘制图形

可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。

示例
HTML

<canvas id = 'canvas' ></canvas>

JavaScript

var canvas = doucument.getElementById('canvas');
var ctx = canvas.getContext('2d');　　// ctx == context 
canvas.fillStyle = ' green ';
canvas.fillRect( 10, 10, 100, 100 );

基础

Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。
默认是inline-block 元素，使用时可以将其设置为 display: block; 块级元素。或者添加 vertical-align: top; 从而消除 inling-block 的 bug
可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。
为了在 Canvas 上绘制图形，我们使用一个JavaScript上下文对象，它能动态创建图像（ creates graphics on the fly）。

<canvas> 元素

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

属性：
height：
width：
该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸；如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
注意: 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为<canvas>明确规定宽高，而不是使用CSS。
说明：使用width和height属性而不是使用CSS.
替换内容
不支持<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>

渲染上下文（The rendering context）

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

方法：
getContext ：用来获得渲染上下文和它的绘画功能。
参数：一个，上下文的格式

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');  // 2d上下文

通过简单测试getContext()方法的存在，可以检查是否支持。

模板

<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>

简单示例

<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>

方法：

fillstyle：图形颜色
fillRect：图形位置和大小，
参数１：左偏移
参数２：右偏移
参数３：图形宽度
参数４：图形高度

栅格（ grid）

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

绘制矩形

HTML中的元素canvas只支持一种原生的图形绘制：矩形。
所有其他的图形的绘制都至少需要生成一条路径。
canvas提供了三种方法绘制矩形：

fillRect(x, y, width, height) (绘制一个填充的矩形)
fillRect() 是Canvas 2D API 绘制填充矩形的方法。矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height ，fillStyle 属性决定矩形的样式。
strokeRect(x, y, width, height) (绘制一个矩形的边框)
strokeRect() 是 Canvas 2D API 在 canvas 中，使用当前的绘画样式，描绘一个起点在 (x, y) 、宽度为 width、高度为 height 的矩形的方法。
clearRect(x, y, width, height) (清除指定矩形区域，让清除部分完全透明。)
clearRect() 是 Canvas 2D API 设置指定矩形区域内（以点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。")

以上的三种方法绘制之后会马上显现在canvas上，即时生效(如果想要改变颜色，必须三种方法之前进行改变才能生效。)。

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

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

方法：

beginPath()：新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径 ==> 开始
closePath()：闭合路径之后图形绘制命令又重新指向到上下文中 ==> 结束
stroke()：通过线条来绘制图形轮廓 ==> 描边
fill()：通过填充路径的内容区域生成实心的图形 ==> 填充
moveTo()：将笔触移动到指定的坐标x以及y上 ==> 移动
lineTo()：绘制一条从当前位置到指定x以及y位置的直线 ==> 画线
arc(x, y, radius, startAngle, endAngle, anticlockwise)：画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
参数：
x,y ==> 圆心坐标
radius ==> 半径
startAngle, endAngle ==> 开始以及结束的弧度(以x轴为基准)
anticlockwise ==> 布尔值(默认 false 顺时针)。true ==> 逆时针方向
fillStyle = color：设置图形的填充颜色。(可以制定 rgba() )
strokeStyle = color：设置图形轮廓的颜色。(可以制定 rgba() )
(color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。)
globalAlpha = transparencyValue：影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
lineWidth = value：设置线条宽度
lineCap = type：设置线条末端样式
值：
butt(默认)
round
square

样式
lineJoin = type：设定线条与线条间接合处的样式
值：
miter(默认) ==> 尖角
round ==> 圆角
bevel ==> 割去

样式
miterLimit = value：限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度
getLineDash()：返回一个包含当前虚线样式，长度为非负偶数的数组。
setLineDash(segments)：设置当前虚线样式
lineDashOffset = value：设置虚线样式的起始偏移量