canvas画布的基础用法

简介

本篇文章的重点在于讲解canvas的基础是用，如果想深入了解还需要到官网进行学习（Canvas官网链接）;那么接下来就开始跟党走吃肉去！

Canvas介绍与引用

Canvas俗称画布，以标签<canvas></canvas>写在html代码中，在浏览器中默认大小 300像素 * 150像素（宽 * 高，像素的单位是px）；且画布的标签属性只有width 和 height。

canvas元素默认被网格所覆盖（浏览器可视区就比作网格）。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（即浏览器左上角坐标为（0,0））。

如：
	// 插入画布
 		<canvas width="500px" height="300px" id="canvas"></canvas>
 	// 获取画布
 		var canvas = document.getElementById('canvas');
	// getContext(),这个方法是用来获得渲染上下文和它的绘画功能
		var ctx = canvas.getContext('2d');
	
	注：
	为其设置css样式就会在浏览器中看到
	</canvas>标签不可省，如果结束标签不存在，则文档的其余部分
	会被认为是替代内容，将不会显示出来	

绘制矩形

注解：x 和 y 表示坐标，width 和 height 表示图形的宽高

	fillRect(x, y, width, height)  绘制一个填充的矩形
	strokeRect(x, y, width, height) 绘制一个矩形边框
	clearRect(x, y, width, height) 清除指定矩形区域
	例：
		ctx.fillRect(25, 25, 100, 100);

绘制路径

画布绘制路径需要经过四步：
1、创建起始点
2、使用画图命令画出路径
3、把路径封闭
4、生成路径就能通过扫描或填充路径区域来渲染图形

	beginPath():新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
	closePath():闭合路径之后图形绘制命令又重新指向到上下文中
	stroke():通过线条来绘制图形轮廓
	moveTo(x, y):将笔触移动到指定的坐标x以及y上
	lineTo(x, y):绘制一条从当前位置到指定x以及y位置的直线
	fill():通过填充路径的内容区域生成实心的图形
	
	例：（绘制三角形）
		ctx.beingPath();
		ctx.moveTo(75, 50);
		ctx.lineTo(100, 75);
		ctx.lineTo(100, 75);
		ctx.fill(); // 填充图形，路径自动封闭

圆弧： arc(x, y, radius, startAngle, endAngle, anticlockwise)
		画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始
		到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成
		
		例：绘制笑脸
		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(); // 描边图形，路径自动封闭
		
	注：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式
		弧度=（Math.P / 180）* 角度

添加样式和颜色（默认下颜色均为黑色）

添加颜色：
fillStyle = color; 设置图形的填充颜色
strokeStyle = color; 设置图形轮廓的颜色
globalAlpha = transparencyValue; 设置图形的透明度，有效值范围0–1

例：
		// 这些 fillStyle 的值均为 '橙色'
        ctx.fillStyle = "orange";
        ctx.fillStyle = "#FFA500";
        ctx.fillStyle = "rgb(255,165,0)";
        ctx.fillStyle = "rgba(255,165,0,1)";
        ctx.globalAlpha = 0.2; // 0-1 从完全透明到完全不透明

线型设置：(用法同上)

	lineWidth = value; 设置线条宽度
   	lineCap = type; 设置线条末端样式
   		butt(末端齐平--默认)、round(末端半圆形)、square(末端多出方形)
   	lineJoin = type; 设置线条与线条连接处的样式
   		round（圆角）、bevel(平角)、miter(尖角--默认值)
   	miterLimit = value; 
   		限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）
   		是指线条交接处内角顶点到外角顶点的长度
   	getLineDash(); 返回一个包含当前虚线样式，长度为非负偶数的数组
   	setLineDash(segments); 设置当前虚线样式
   	lineDashOffset = value; 设置虚线样式的起始偏移量

渐变（Gradients）：
createLinearGradient(x1, y1, x2, y2) 表示起点（x1,y1）与终点（x2, y2）
createRadialGradient(x1, y1, r1, x2, y2, r2)
(x1, y1)为原点半径为r1的圆，（x2, y2）为原点半径为r2的圆

例：创建对象
 	var lineargradient = ctx.createLinearGradient(0,0,150,150);
	var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);
	创建完对象后就可以上色了：
		gradient.addColorStop(position, color)
		position取值在0.0到1.0之间，表示渐变颜色所在的相对位置
		color为颜色值（如#fff, rgba(0,0,0,1）等)
		
	可以根据需要添加任意多个色标（color stops）,如黑白渐变
	var lineargradient = ctx.createLinearGradient(0,0,150,150);
        lineargradient.addColorStop(0,'white');
        lineargradient.addColorStop(1,'black');

图案样式

createPattern(image, type);
image 可以是一个image对象的引用
type值得类型为：repeat、repeat-x、repeat-y、no-repeat

图案的应用跟渐变很类似，创建出一个pattern之后，赋给fillStyle或strokeStyle属性即可,如下：
	function draw() {
 		var ctx = document.getElementById('vanvas').getContext('2d');
 		//创建新image对象，用作图案
 		var img = new Image();
 		img.src = 'https://baidu.png';
 		img.onload = function() {
 			//创建图案
 			var ptrn = ctx.createPattern(img, 'repeat');
 			ctx.fillStyle = ptrn;
 			ctx.fillRect(0, 0, 150, 150);
 		}
 	}

阴影Shadows

shadowOffsetX = float;
shadowOffsetY = float;
负值表示阴影会往上或左延伸，正直表示会往下右延伸，默认值为0
shadowBlur = float;
设定阴影的模糊程度，其数值不与像素数量挂钩，也不受变换矩阵的影响，默认0
shadowColor = color;
标准css颜色值，用于设定阴影颜色效果，默认全透明的黑色

例：文字阴影效果
  		function draw() {
  			var ctx = document.getElementById('canvas').getContext('2d');
  			ctx.shadowOffsetX = 2;
  			ctx.shadowOffsetY = 2;
  			ctx.shadowBlur = 2
  			ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
  			ctx.font = "20px Times New Roman";
  			ctx.fillStyle = "Black";
  			ctx.fillText("Sample String", 5, 30);
  		}

Canvas填充规则

     fill() 根据某处在路径的外面或者里面来决定该处是否被填充
     有两个值：“nonzero”默认不填充，“evenodd”填充
     ctx.fill("evenodd"); //填充

绘制文本

canvas有两种方法来渲染文本：
fillText(text, x, y, [maxWidth]);
strokeText(text, x, y, [maxWidth]);
在指定的(x, y)位置填充指定的文本，绘制的最大宽度是可选的

 例：
	function draw() {
		var ctx = document.getElementById('canvas').getContext('2d');
		ctx.font = "48px serif";
		ctx.strokeText("Hello word", 10, 50);
	}

有样式的文本

	font = value; 设置文本大小
	textAlign = value; 
	文本对齐：left、right、center、start(默认值)
	textBaseline = value; 
	基线对齐：top、middle、bottom、alphabetic(默认)
	direction = value; 
	文本方向：ltr、rtl、inherit(默认值)
	例：
		ctx.font = "48px serif";
		ctx.textBaseline = "hanging";
		ctx.strokeText("Hello world", 0, 100);

使用图像

a、引入图像到canvas里需要两步基本操作：
1、获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片
2、使用drawImage()函数将图片绘制到画布上

b、从零开始创建图像

	varimg = new Image(); // 创建一个<img>元素
	img.src = 'myImage.png'; // 设置图片源地址
	img.onload = function() {
		// 保证不会在加载完毕之前使用这个图片
	}

c、绘制图片

	drawImage(image, x, y);
	x 和 y 是其在目标canvas里的起始坐标
	drawImage(img, x, y, width, height);
	width、height用于控制canvas画入时应该缩放的大小
	drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)  // 切片
		
		例：（画一个折线图）
		function draw() {
			var ctx = document.getElementById('canvas').getContext('2d');
			var img = new Image();
			img.onload = function() {
				ctx.drawImage(img, 0, 0);
				ctx.beginPath();
				ctx.moveTo(30, 96);
				ctx.lineTo(70, 66);
				ctx.lineTo(103, 76);
				ctx.stroke();
			}
			img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
		}

本篇文章只是介绍了Canvas的一些基本使用语法，主要帮助那些做快速上手canvas提供一些帮助，想要具体的知晓canvas还需到官网进行系统学习