×
广告

canvas 画布

96
我是Alex
2017.11.13 00:16* 字数 1597

<canvas>是一个可以使用脚本(通常为Javascript)在其中绘制图形的HTML元素,它可以用以制作照片集或者制作简单(也不是那么简单)的动画。
canvas 标签用以定义图形的标签。

开始之前

Canvas的默认大小为300像素150像素(宽度高度,像素的单位是px)。但是,可以使用HTML中的宽度和高度属性来自定义canvas的尺寸。为了在Canvas绘制图形,我们使用一个Javascript上下文对象,它能动态创建图像。

基本用法

注意:如果你绘制出来的图像是扭曲的, 尝试在<canvas>的属性中明确规定宽和高,而不是使用CSS。
</canvas>标签不可省略,因为<canvas>元素需要结束标签</canvas>。如果结束标签不存在,则文档的其余部分会被认为是替代内容,将不会显示出来。
canvas起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。<canvas>元素有一个叫做getContext( )方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext( )只有一个参数,上下文的格式。对于2D图像而言,你可以如以下这样使用:

// 得到canvas
var canvas = document.getElementById("canvas");
// 得到上下文
var ctx = canvas.getContext("2d");

代码的第一行通过使用 document.getElementById()方法来为<canvas>元素得到DOM对象。一旦有了元素对象,你可以通过使用它的getContext() 方法来访问绘画上下文。
绘制图形
既然我们已经设置了canvas环境,我们可以深入了解如何在 canvas 上绘制。到本文的最后,你将学会如何绘制矩形,三角形,直线,圆弧和曲线,变得熟悉这些基本的形状。
绘制矩形
canvas提供了三种方法绘制矩形:

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

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

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

上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。width 和 height 设置矩形的尺寸。
矩形例子:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);

该例子的输出如下图所示。


image.png
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect();

该例子的输出如下图所示。


image.png
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);

该例子的输出如下图所示。


image.png

fillRect() 函数绘制了一个边长为100px的黑色正方形。clearRect() 函数从正方形的中心开始擦除了一个60 * 60px的正方形,接着 strokeRect() 在清除区域内生成一个50 * 50的正方形边框。
绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。使用路径绘制图形需要一些额外的步骤。

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

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

生成路径的第一步叫做beginPath()。本质上,路径是由很多子路径构成,这些子路径都是在一个列表中,所有的子路径(线、弧形、等等)构成图形。而每次这个方法调用之后,列表清空重置,然后我们就可以重新绘制新的图形。

注意:当前路径为空,即调用beginPath()之后,或者canvas刚建的时候,第一条路径构造命令通常被视为是moveTo(),无论最后的是什么。出于这个原因,你几乎总是要在设置路径之后专门指定你的起始位置。

第二步就是调用函数指定绘制路径。
第三,就是闭合路径closePath() , 不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的,即当前点为开始点,该函数什么也不做。

注意:当你调用fill()函数时,所有没有闭合的形状都会自动闭合,所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
绘制一个三角形

例如,绘制三角形的代码如下:

         function draw() {
                        // 绘制canvas
            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();
          }
        }
        draw()

输出看上去如下:

image.png

移动笔触
一个非常有用的函数,而这个函数实际上并不能画出任何东西,也是上面所描述的路径列表的一部分,这个函数就是moveTo()。或者你可以想象一下在纸上作业,一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。
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();
  }
}
draw();

该例子的输出如下图所示。

image.png

线
绘制直线,需要用到的方法lineTo()。
lineTo(x,y)
绘制一条从当前位置到指定x以及y位置的直线。
该方法有两个参数:x以及y ,代表坐标系中直线结束的点。开始点和之前的绘制路径有关,之前路径的结束点就是接下来的开始点,等等。。。开始点也可以通过moveTo()函数改变。

下面的例子绘制两个三角形,一个是填充的,另一个是描边的。

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();
  }
}
draw();

显示图形如下:


image.png

这里从调用beginPath()函数准备绘制一个新的形状路径开始。然后使用moveTo()函数移动到目标位置上。然后下面,两条线段绘制后构成三角形的两条边。

你会注意到填充与描边三角形步骤有所不同。正如上面所提到的,因为路径使用填充(filled)时,路径自动闭合,使用描边(stroked)则不会闭合路径。如果没有添加闭合路径closePath()到描述三角形函数中,则只绘制了两条线段,并不是一个完整的三角形。

圆弧

绘制圆弧或者圆,我们使用arc()方法。当然可以使用arcTo(),不过这个的实现并不是那么的可靠,所以我们这里不作介绍。

ctx.arc(x,y,50,0,360,false);                                                                                            
ctx.arc(x轴,y轴,半径,起始角,结束角,正负时针方向);

画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到endAngle结束,按照anticlockwise给定的方向(默认为顺时针)来生成。
为true时,是逆时针方向,false顺时针方向。

注意:arc()函数中的角度单位是弧度,不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
下面的例子比上面的要复杂一下,下面绘制了12个不同的角度以及填充的圆弧。

日记本
Web note ad 1