Canvas绘图小结

一、目前web绘图技术一览

①统计图表 echats
②实时走势图 canvas
③在线画图板 魔猴
④HTML5游戏 three.js
⑤可用绘图技术：
canvas 位图，单位是px 2D图像和图形
svg 矢量图
webGL 3D图像和图形

二、canvas 常规图形绘制

本文我们先就Canvas绘图做一个小结。

1.定义创建 canvas

<canvas width="600" height="400" id="canvas"></canvas>	// 在Html中创建画布，并设定画布尺寸

javascript:   
var canvas = document.getElementById("canvas");//获取画布对象（画笔）	Context上下文	content内容 
		var context = canvas.getContext("2d");

2.1矩形

	ctx.fillRect(x,y,w,h);		// 实心矩形
	ctx.fillStyle = "#FFF";
	ctx.strokeRect(x,y,w,h);	// 空心矩形
	ctx.strokStyle = "#FFF";
	ctx.linewidth = 10;			// 线条宽度

2.2圆形

// ctx.arc(圆心x, 圆心y, 半径r, 起始角度位置, 重点角度位置, counterclockwise);
		// counterclockwise : 可选参数，默认顺时针绘制，false;
		ctx.beginPath();
		ctx.arc(280,60,50,0,Math.PI * 2);
		ctx.closePath();
		ctx.stroke()

3.线性渐变

	// 创建一个渐变对象 ctx.createLinearGradient(x0,y0,x1,y1)，
	var grad = cxt.createLinearGradient(0,0,400,300);
	// 设置渐变颜色及偏移度
	grad.addColorStop(0,"red");
	grad.addColorStop(0.3,"yellow");
	grad.addColorStop(0.6,"pink");
	grad.addColorStop(1,"blue");
	ctx.fillStyle = grad;
	ctx.fillRect(0,0,400,300);

4.扇形渐变

	// 创建渐变对象：ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)
	var grad = cxt.createRadialGradient(150,150,0,150,150,200);
	grad.addColorStop(0,"red");
	grad.addColorStop(0.5,"blue");
	grad.addColorStop("1","yellow");
	ctx.fillStyle = grad;
	ctx.fillRect(0,0,400,400);

5.绘制文字

	// 设置文字的font属性
	ctx.font = "bold 48px 宋体";
	// 绘制文字
	// context.fillText(text,x,y,maxWidth);
	ctx.strokeRect(100,100,200,200)
	ctx.fillText("TXT_01",100,100,50);
	ctx.strokeText("TXT_02",200,200);

6.绘制文字的水平对齐

	// 可以设置文字对齐
	ctx.textAlign = "center";
	ctx.textAlign = "right";
	ctx.textAlign = "left";
	ctx.textAlign = "end";
	ctx.textAlign = "start";
	ctx.textBaseline = "alphabetic";	// 文本基线

7.路径绘制

	// 1.创建路径
	ctx.beginPath();
	// 2.绘制形状
	ctx.rect(10,10,100,100);
	// 3.绘制
	ctx.stroke();	// context.fill();
	// 4.关闭当前路径
	ctx.closePath();

	/* 路径绘图 */
	ctx.beginPath();		// 开始
	ctx.moveTo(10,10);		// 起始点
	ctx.lineTo(100,10);		// 转折点
	ctx.lineTo(100,100);
	ctx.lineTo(200,100);
	ctx.lineTo(300,200);
	ctx.closePath();		// 结束
	ctx.lineWidth = 2;		// 线条宽度
	ctx.fill()				// 填充

三、canvas 图片与图形绘制

1.canvas 引入图片

	var myimg = new Image();
	myimg.src = "imgs/1.jpg";
	myimg.onload = function(){
		context.drawImage(myimg,10,10,300,300);
	}
	/*
		画布中不显示图片的原因：
		先加载canvas画布,在画布中加载图片
 解决办法：
	 	window.onload - 页面加载完毕
	 	img.onload    - 保证图片先加载完毕    推荐使用
	 */

2.canvas 图片平铺

	var myimg = new Image();
	myimg.src = "imgs/1.jpg";
	myimg.onload = function(){
		var ptn = context.createPattern(myimg,"repeat");
		context.fillStyle = ptn;
		context.fillRect(0,0,canvas.width,canvas.height);
	}

3.canvas 图片切割

	var myimg = new Image();
	myimg.src = "imgs/1.jpg";
	myimg.onload = function(){
		context.drawImage(myimg,0,0);
	}
	//截图 => clip()   属性创建一个路径
	context.beginPath();
	context.arc(180,70,50,0,Math.PI*2);		// context.rect(120,20,150,100);
	context.closePath();
	context.clip();

4.canvas 绘制原地旋转图片

	var img = new Image();
	img.src = "imgs/hero1.png";
	img.onload = function(){
	var deg = 0;
	setInterval(function(){
		cxt.clearRect(0,0,w,h);		// 清除画布
		cxt.save();		// 存储API
		deg += 5;
		cxt.translate(img.width/2,img.height/2);	// 新设原点
		cxt.rotate(deg * Math.PI/180);				// 旋转角度
		//绘制图像设置绘制图像时的坐标位置
		cxt.drawImage(img,-(img.width/2),-(img.height/2));
		cxt.restore();	// 存储API