html5 canvas

时间：2018-03-18 22:29:02 阅读：384 评论：0 收藏：0 [点我收藏+]

标签：back number AC man arc 取值 style targe 内容

html5中的<canvas>标签是一个可以使用js脚本在其中绘图的html元素。有强大的API，可用于制作照片集或制作简单的动画。有人说canvas是html5的精髓。

一、基本用法

1、初始画布

一般会拿<canvas>和<img>对比，因为它画出来也是张图片，但实际上没什么可比性。canvas只有width和height属性，而且还是可选的。如果没有给canvas样式和宽高，则它是透明的，默认大小为300px*150px;可通过css设置,有时候面试题会问anvas的默认大小是多少？。

画笔默认颜色是黑色。

举例：初始画布

给canvas加上边框，就可以清楚的看到初始画布大小：300px*150px

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas</title>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>

技术分享图片

渲染过程图片会缩放以适应布局大小。如果图片的宽高比和canvas的不同，可能会出现变形。

Note:如果图片出现变形，在<canvas>标签中直接设置宽高，而不要在css中设置。

2、后备内容

<canvas>可以像<video>,<audio>或者<picture>元素一样，在不支持它的浏览器中给一些后备内容（fallback content）。

后备内容写在<canvas></canvas>之间的内容，不支持canvas的浏览器忽略canvas渲染里面的内容，支持canvas的浏览器忽略后备内容，正常渲染canvas。

所以在低版本浏览器最好给出一些后备内容描述canvas的内容，可以是文字或者图片。

Note：也是因为后备内容的关系，必须有</canvas>闭合标签，否则后面所以内容会被当成后备内容，在浏览器支持canvas时不显示。

3、渲染上下文

canvas有一个固定大小的画布，可以有一个或多个渲染上下文，用来创建和操作绘图。现在只关注2d渲染上下文。 WebGL用的是3d渲染上下文。

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的API。

一个画布初始是空白的，要想作画，首先脚本要获取渲染上下文才能在画布上作画。<canvas>元素通过getContext()来获取一个渲染上下文，和画图方法。getContext()有一个参数，2d画图只需要一个"2d"即可获取一个 CanvasRenderingContext2D。

所以画图首先需要的就是两步：

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

举例：一个简单的例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Canvas</title>
  <style type="text/css">
  canvas { border: 1px solid black; }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="150" height="150"></canvas>
  <script type="text/javascript">
  var canvas=document.getElementById("myCanvas");
  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>
</body>
</html>

View Code

技术分享图片

二、绘制图形

通过基本用法我们已经可以画简单的图了，使用canvas主要是要掌握几个画图方法，现在深入了解一下。

1、canvas坐标

默认情况：1个格子对应1px，从(0,0)开始。

技术分享图片

我们可以通过一些手段平移坐标起点，旋转甚至缩放网格。现在就以默认情况介绍。复杂的图都是由简单的组合来的，现一一介绍。

2、画矩形

三个函数：

fillRect(x, y, width, height)：画一个填充矩形

strokeRect(x, y, width, height)：画矩形轮廓。【stroke英文意思是“笔画”，所以看到的是落笔与起笔之间的笔画】

clearRect(x, y, width, height)：清除指定的矩形区域，使其完全透明。类似橡皮擦。

参数含义都一样：x，y表示相对origin【默认就是相对左上角】的一个画图起点，width，height就是矩形的大小。

举例：

  ctx.fillRect(25,25,100,100);//画一个黑色最大填充矩形
  ctx.clearRect(45,45,60,60);//擦除一块中等大小透明矩形
  ctx.strokeRect(50,50,50,50);//画一个小矩形轮廓

技术分享图片

3、绘制路径

这里路径指的是很多被线段连接起来的点，可以有不同的形状，完全，颜色和粗细。

绘制路径步骤：

a、创建path

b、使用 drawing commands 绘制路径

c、闭合路径

d、渲染路径

用到的函数：

beginPath()：创建一个新的路径，之后的绘图命令直接作用于于该路径。

Path methods：该方法为对象设置不同的路径。

closePath()：关闭路径，很重要，让之后的绘图命令再次回到上下文。

stroke()：绘制路径轮廓。

fill()：填充路径。

Note：调用了fill()方法后，一些打开的shapes自动关闭，而调用stroke却不会自动关闭。下面举例来说明这点。

举例：画三角形，stroke不会自动闭合，fill自动闭合。

<script type="text/javascript">
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var path=new Path2D();
  path.moveTo(75,50);
  path.lineTo(100,75);
  path.lineTo(100,25);
  // ctx.stroke(path);
  ctx.fill(path);
</script>

技术分享图片

分析：可见stroke不会自动闭合路径，我们可以通过stroke看到绘制路径的过程。

4、移动画笔Moving the pen

移动画笔指的是一个上面例子中用到的一个函数——moveTo(x,y)。

初始化一张画布，首先就是举起画笔移动到要作画的位置，就是要用moveTo(x,y)函数。

可以类比一下moveTo就相当于在空中画线，不会在画布上留下任何痕迹，延伸一下，我们就知道可以用moveTo来画一些独立路径。

举例：

<script type="text/javascript">
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    var path=new Path2D();
    path.arc(75,75,50,0,Math.PI*2,true);//外部圆圈
    path.moveTo(110,75);
    path.arc(75,75,35,0,Math.PI,false);    //顺时针画半个圆做嘴巴
    path.moveTo(65,65);
    path.arc(60,65,5,0,Math.PI*2,true);//左眼
    path.moveTo(95,65);
    path.arc(90,65,5,0,Math.PI*2,true);//右眼
    ctx.stroke(path);
</script>

技术分享图片

5、画线

画线用LineTo(x,y)函数，表示从当前位置画一条到左边（x,y）的线，起点可通过moveTo()函数重置。

举例：

<script type="text/javascript">
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    //填充三角形
    var ftriangle=new Path2D();
    ftriangle.moveTo(25,25);
    ftriangle.lineTo(105,25);
    ftriangle.lineTo(25,105);
    ctx.fill(ftriangle);
    //三角形轮廓
    var striangle=new Path2D();
    striangle.moveTo(125,125);
    striangle.lineTo(125,45);
    striangle.lineTo(45,125);
    striangle.closePath();    //显示闭合路径
    ctx.stroke(striangle);
</script>

技术分享图片

5、弧线

画弧和画圆都用arc()或arcTo()函数。

arc(x,y,radius,startAngle,endAngle,acticlockwise)

画弧，弧心为(x,y)，半径为radius,起始弧为startAngle,终止弧到endAngle,方向按照anticlockwise来画。【clockwise意思是“顺时针”，加了anti-前缀就是逆时针，所以默认是逆时针画弧，可通过true和false来控制】

arcTo(x1,y1,x2,y2,radius)

arcTo()在画布上创建介于两个切线之间的弧/曲线。

6、曲线

贝塞尔曲线：

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

二次曲线：

quadraticCurveTo(cp1x, cp1y, x, y)

(cp1x,cp1y)－－控制点此函数表示从当前的画笔位置到（x，y）画一条二次曲线

      var canvas=document.getElementById("myCanvas");
      var ctx=canvas.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(20, 20);
      ctx.quadraticCurveTo(20, 100, 200, 20);
      ctx.stroke();

技术分享图片

Note：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

技术分享图片

开始点：moveTo(20,20)
控制点：quadraticCurveTo(20,100,200,20)
结束点：quadraticCurveTo(20,100,200,20)

三、样式和颜色

主要是美化作用，画线时添加不同颜色，线型，渐变，模式和阴影。

1、颜色

应用颜色用到两个重要属性：fillStyle和strokeStyle。

fillStyle=color：填充色。

strokeStyle=color：轮廓色。

//设置橘色的不同写法
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

fillStyle取值color可以是普通颜色或一个渐变图片。

用的时候注意，想换种颜色就必须再次调用fillStyle或strokeStyle属性。

fillStyle举例：

<script type="text/javascript">
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    for(var i=0;i<6;i++){
        for(j=0;j<6;j++){
            ctx.fillStyle=‘rgb(‘+Math.floor(255-42.5*i)+‘,‘+Math.floor(255-42.5*j)+‘,0)‘;
            ctx.fillRect(j*25,i*25,25,25);
        }
    }
</script>

技术分享图片

strokeStyle举例：

<script type="text/javascript">
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    for(var i=0;i<6;i++){
        for(j=0;j<6;j++){
            ctx.strokeStyle=‘rgb(‘+Math.floor(255-42.5*i)+‘,‘+Math.floor(255-42.5*j)+‘,0)‘;
            ctx.beginPath();
            ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
            ctx.stroke();
        }
    }
</script>