JavaScript高级程序设计读书笔记15

发表于 | 分类于 ，

第15章 使用Canvas绘图

基本用法

  • 要使用canvas元素，必须先设置其width和height属性，指定绘图区域的大小。
  • getContext()：取得绘图上下文
  • toDataURL()：导出在canvas元素元素上绘制的图像

2D上下文

  • 2D上下文的坐标开始于canvas元素的左上角，圆点坐标为（0，0），所有坐标都是基于这个圆点计算，x值越大越靠右，y值越大越靠下。

填充和描边

  • 2D上下文的两种基本绘图操作是填充和描边
  • fillStyle（填充）和strokeStyle（描边）属性：属性的值可以是字符串、渐变对象或模式对象

绘制矩形

方法名 参数 说明
fillRect() 矩形的x坐标、矩形的y坐标、矩形的宽度和矩形的高度 在画布上绘制的矩形会填充指定的颜色
strokeRect() 矩形的x坐标、矩形的y坐标、矩形的宽度和矩形的高度 在画布上绘制的矩形会使用指定的颜色描边
clearRect() 矩形的x坐标、矩形的y坐标、矩形的宽度和矩形的高度 清除画布上的矩形区域 


1
2
3
4
5
6
7
8
9
10
11
12
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext) {
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
    var context = drawing.getContext("2d");
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    //绘制半透明的蓝色矩形
    context.fillStyle="rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
}


1
2
3
4
5
6
7
8
9
10
11
12
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext) {
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
    var context = drawing.getContext("2d");
    //绘制红色矩形
    context.strokeStyle = "#ff0000";
    context.strokeRect(10,10,50,50);
    //绘制半透明的蓝色矩形
    context.strokeStyle="rgba(0,0,255,0.5)";
    context.strokeRect(30,30,50,50);
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext) {
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象
    var context = drawing.getContext("2d");
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    //绘制半透明的蓝色矩形
    context.fillStyle="rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
    //在两个矩形冲抵的地方清除一个小矩形
    context.clearRect(40,40,10,10);
}

绘制路径

  • 要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径。
  • strock()方法对路径描边。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    var drawing=document.getElementById("drawing");
    //确定浏览器支持<canvas>元素
    if(drawing.getContext){
    //取得绘图上下文对象的引用，“2d”是取得2D上下文对象
        var context=drawing.getContext("2d");
    //开始路径
        context.beginPath();
    //绘制外圆
        context.arc(100,100,99,0,2*Math.PI,false);
    //绘制内圆
        context.moveTo(194,100);
        context.arc(100,100,94,0,2*Math.PI,false);
    //绘制分针
        context.moveTo(100,100);
        context.lineTo(100,15);
    //绘制时针
        context.moveTo(100,100);
        context.lineTo(35,100);
        context.strokeStyle="rgba(0,0,255,0.5)";
    //最后必须调用stroke()方法，这样才能把图像绘制到画布上。
        context.stroke();
    }

绘制文本

  • fillText(),strokeText()：接受四个参数：要绘制的文本，x坐标，y坐标和可选的最大像素
  • fillText()由于可以模仿在网页中正常显示文本，所有应用的更多。
    1
    2
    3
    4
    5
    //添加文字“12”
       context.font="bold 14px Arial";
       context.textAlign="center";   //文本的对齐方式
       context.textBaseline="middle";//文本的基线
       context.fillText("12",100,20);

变换

  • save()、restore()可以跟踪上下文的状态变化
  • save保存设置到一个栈结构，restore恢复前一级保存的状态
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var context=drawing.getContext("2d");
       context.fillStyle="#ff0000";
       context.save();

       context.fillStyle="#00ff00";
       context.translate(100,100);
       context.save();

       context.fillStyle="#0000ff";//蓝色
       context.fillRect(0,0,100,200); //点(110,110)

       context.restore();//绿色
       context.fillRect(10,10,100,200); //点(110,110)

       context.restore();//红色
       context.fillRect(0,0,100,200); //点(0,0)

绘制图像

  • drawImage():把一幅图像绘制到画布上。
  • 三种不同的调用方式：

    1.传入一个元素，绘制图像起点的x,y坐标。
    2.还可以再传两个参数：目标宽度，目标高度。以此来缩放图像。
    3.传入9个参数：要绘制的图像，源图像的x坐标，源图像的y坐标,源图像的宽度，源图像的高度，目标图像的x坐标，目标图像的y坐标，目标图像的宽度，目标图像的高度。

阴影

  • shadowColor:用Css颜色格式表示的阴影颜色，默认为黑色。
  • shadowOffsetX:形状或路径x轴的阴影偏移量，默认为0.
  • shadowOffsetY:形状或路径ya轴的阴影偏移量，默认为0.
  • shadowBlur:模糊的像素数，默认为0，及不模糊。

渐变

  • 渐变由CanvasGradient实例表示。通过2D上下文来创建和修改：
  • createLinearGradient():创建一个新的线性渐变。4个参数：起点的x，y坐标，终点的x,y坐标。返回CanvasGradient实例。
  • 创建完后，使用addColorStop():指定色标。两个参数：色标位置（0-1）和CSS颜色值。
1
2
3
4
5
6
var context = drawing.getContext("2d"),
gradient = context.createLinearGradient(30, 30, 70, 70);                  
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

模式

  • 其实就是重复的图像，可以用来填充或描边图形。
  • createPattern():2个参数，一个HTML<img>元素和一个表示如何重复图像的字符串

使用图像数据

  • getImageData():取得原始图像数据。4个参数，要取得其数据的画面区域的x，y坐标以及该区域的像素宽度和高度。 返回一个ImageData的实例。
  • 每个ImageData对象有三个属性。width,height和data。
  • data属性是一个数组，保存着图像中每个像素的数据，每个像素用4个元素保存，红，绿，蓝，透明度

合成

  • globalAlpah:介于0-1的值，用于指定所有绘制的透明度。
  • globalCompositionOperation:表示后绘制的图形怎样与先绘制的结合

WebGL

  • 针对Canvas的3D上下文

类型化数组

  • 类型化数组也是数组，只不过其元素被设置为特性类型的值
  • ArrayBuffer（数组缓冲器类型）：表示内存中指定的字节数，但是不会指定这些字节用于保存什么类型的数据

WebGL上下文

  • 用GLSL编写的顶点和片段着色器
  • 支持类型化数组，即能够将数组中的数据限定为某种特定的数据类型
  • 创建和操作纹理