js学习笔记-API（三）

JavaScript中有关于绘图API的基础知识（1）。

包括：创建画布、绘制矩形、描边线条与宽度、绘制路径与文本、绘制图片。

绘图API

学习目标：使用 WebGL 库来创建一个 3D 场景

IE 8 及以下不支持 2D 画布，IE 11 及以下不支持WebGL（ (Web图形库) 是一种JavaScript API ）。

开始

要在网页中创建 2D 或者 3D 场景，必须在 HTML 文件中插入一个<canvas>元素，以界定网页中的绘图区域。

<!--网页中会生成一块 320 × 240 像素的画布-->
<canvas width="320" height="240"> </canvas>

创建画布及确定尺寸

<!--不明确指定宽高时，画布默认尺寸为 300 × 150 像素-->
<!--class用于选择多个画布-->

<canvas class="myCanvas">
  <p>添加恰当的反馈信息。</p>
</canvas>

确定尺寸的时候我们可以在JavaScript中添加代码，如：

//需要可视化窗口同样大小的画布时可以这么做
var canvas = document.querySelector('.myCanvas');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

Note：

1.在这里我们定义了width和height两个变量，在后面绘图的时候我们可以使用这两个变量很快捷地访问画布的宽和长。

2.这个时候文档还是有滚动条的，我们把 <body> 元素的外边距（margin）设为0，并把overflow隐藏就可以.

<style>
  body {
    margin: 0;
    overflow: hidden;
  }
</style>

获取画布上下文（canvas context）并完成设置

需要获得一个对绘画区域的特殊的引用（称为“上下文”）用来在画布上绘图。

当我们需要一个2D画布，可以使用 HTMLCanvasElement.getContext()方法获得基础绘图功能：

var ctx = canvas.getContext('2d');

ctx 变量包含一个 CanvasRenderingContext2D 对象，画布上所有绘画操作都会涉及到这个对象。

fillStlye属性：设置填充色。
fillRect()方法：绘制覆盖整个区域的矩形，有四个参数。前两个参数是矩形左上顶点的坐标，后两个参数是矩形的长宽

ctx.fillStyle = 'rgb(0,0,0)';//黑色，色值属性与css相同
ctx.fillRect(0,0,width,height);

简单矩形

许多操作都需要提供坐标来指示绘图的确切位置。画布左上角的坐标是(0, 0)，横坐标（x）轴向右延伸，纵坐标（y）轴向下延伸。

绘制一个矩形我们就可以使用fillStlye属性和fillRect()方法。

注意：

1.新层会覆盖旧层。

2.rgba()可以绘制半透明的图形，包括 rgb 和a 四个参数，a 指定了“α 通道”的值，也就是颜色的透明度。值越高透明度越高，底层的内容就越清晰。

如：

ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';//这里 a = 0.75
ctx.fillRect(25, 100, 175, 50);

描边（stroke）和线条宽度

strokeStlye属性：设置填充色。
strokeRect()方法：绘制覆盖整个区域的矩形，有四个参数。前两个参数是矩形左上顶点的坐标，后两个参数是矩形的长宽

ctx.strokeStyle = 'rgb(255, 255, 255)';
ctx.strokeRect(25, 25, 175, 200);

默认的描边宽度是 1 像素，可以通过调整 lineWidth属性的值来修改

ctx.lineWidth = 5;//添加在绘图方法之前

绘制路径

beginPath()：在钢笔当前所在位置开始绘制一条路径。在新的画布中，钢笔起始位置为 (0, 0)。
moveTo()：将钢笔移动至另一个坐标点，不记录、不留痕迹，只将钢笔“跳”至新位置。
fill()：通过为当前所绘制路径的区域填充颜色来绘制一个新的填充形状。
stroke()：通过为当前绘制路径的区域描边，来绘制一个只有边框的形状。
路径也可和矩形一样使用 lineWidth 和 fillStyle / strokeStyle 等功能。

//绘制简单路径的基本步骤
ctx.fillStyle = 'rgb(255, 0, 0)';//颜色
ctx.beginPath();//开始绘制
ctx.moveTo(50, 50);//钢笔目前所在坐标
ctx.fill();// 绘制路径

//将角度换算为弧度，在为 JavaScript 提供角度值时非常实用，JS 基本上只接受弧度值，而人类更习惯用角度值
function degToRad(degrees) {
  return degrees * Math.PI / 180;
};

三角形：

ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.beginPath();
ctx.moveTo(50, 50);
//以上是基本步骤
ctx.lineTo(150, 50);//移动到（150,50）
var triHeight = 50 * Math.tan(degToRad(60));//计算三角形的高
ctx.lineTo(100, 50+triHeight);//移动
ctx.lineTo(50, 50);//移动
ctx.fill();//填充

圆：

arc()方法：有六个参数。前两个指定圆心的位置坐标，第三个是圆的半径，第四、五个是绘制弧的起、止角度（给定 0° 和 360° 便能绘制一个完整的圆），第六个是绘制方向（false 是顺时针，true 是逆时针）。

【0°：水平向右】

如：

//圆心坐标（150,106），圆半径50，起止角度0-360，顺时针。
ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);

如果要填充一个未完成（也就是没有首尾相接）的路径，浏览器将在起、止点件绘制一条直线，然后直接填充。

文本

以下两个函数用于绘制文本：

fillText()：绘制有填充色的文本。
strokeText()：绘制文本外边框（描边）。

Note:

1.这两个函数有三个基本的参数：需要绘制的文字、文本框（顾名思义，围绕着需要绘制文字的方框）左上顶点的X、Y坐标。

2.还有一系列帮助控制文本渲染的属性：比如用于指定字体族、字号的 font，它的值和语法与 CSS 的 font 属性一致。

ctx.strokeStyle = 'white';//边框颜色白色
ctx.lineWidth = 1;//边框厚度1
ctx.font = '36px arial';//字体大小
ctx.strokeText('Canvas text', 50, 50);//描边。第一个参数文字，第二三个参数为坐标。

ctx.fillStyle = 'red';//填充颜色红色
ctx.font = '48px georgia';//字体大小
ctx.fillText('Canvas text', 50, 150);//填充。第一个参数文字，第二三个参数为坐标。

在画布上绘制图片

drawImage()方法可将图片绘制在画布上。

首先：使用Image()构造器new一个image对象。

其次：然后将它的 src 属性设置为图片链接。

最后：drawImage方法嵌入图片。

var image = new Image();
image.src = 'firefox.png';
image.onload = function() {
 	ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
}

drawImage()方法的几个参数：

第一个：图片引用。（刚开始创建的一个图片对象）
第二、三个：裁切部分左上顶点的坐标，参考原点为原图片本身左上角的坐标。原图片在该坐标左、上的部分均不会绘制出来。
第四、五个：裁切部分的长、宽
第六、七个：裁切部分左上顶点在画布中的位置坐标，参考原点为画布左上顶点
第八、九个：裁切部分在画布中绘制的长、宽