html5基础---canvas-前端开发

1. canvas简介?canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形? 使用canvas标签时，建议要成对出现，不要使用闭合的形式。? canvas元素默认具有高宽width: 300pxheight: 150px2...

1. canvas简介

? <canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形

? · 使用<canvas>标签时，建议要成对出现，不要使用闭合的形式。

? · canvas元素默认具有高宽

	width: 300px
	height: 150px

2. 替换内容

? 由于某些较老的浏览器（尤其是IE9之前的IE浏览器）不支持HTML元素<canvas>，但在这些浏览器上你应该要给用户展示些替代内容。这非常简单：我们只需要在<canvas>标签内部提供替换内容就可以。
? · 支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。
? · 不支持<canvas>的浏览器会显示代替内容。

3. canvas的宽和高属性

? · html属性设置width、height时只影响画布本身不影画布内容。**★推荐使用 **
? · css属性设置width、height时不但会影响画布本身的高宽，还会使画布中的内容等比例缩放（缩放参照于画布默认的尺寸）。

4. 渲染上下文

? · getContext() ，这个方法是用来获得渲染上下文和它的绘画功能。

var canvas = document.getElementById('canvas');
if (canvas.getContext){
    var ctx = canvas.getContext('2d');
}

5. 绘制矩形

? canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。

· 三个方法：

	// 绘制一个填充的矩形（填充色默认为黑色）
	fillRect(x, y, width, height)
	// 绘制一个矩形的边框（默认边框为:一像素实心黑色）
	strokeRect(x, y, width, height)
	// 清除指定矩形区域，让清除部分完全透明。	
	clearRect(x, y, width, height)

	// x、y不带单位
	// x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。
	// width和height设置矩形的尺寸。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）

? strokeRect时，边框像素渲染问题
? 按理渲染出的边框应该是1px的，canvas在渲染矩形边框时，边框宽度是平均分在偏移位置的两侧。
? context.strokeRect(10,10,50,50)
? 边框会渲染在10.5 和 9.5之间,浏览器不支持小数的像素，自动取整，边框会渲染在9到11之间。
? context.strokeRect(10.5,10.5,50,50) 边框会渲染在10到11之间 ★★ 推荐使用

· 添加样式和颜色

	// 同步渲染，必须在绘画之前定义，而且后面定义的样式会覆盖到前面声明的样式上面。
	// 用法与上述三个方法相同

	fillStyle: 设置图形的填充颜色。
	strokeStyle: 设置图形轮廓的颜色。
		默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）
	lineWidth: 这个属性设置当前绘线的粗细。属性值必须为正数。
		描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。
		默认值是1.0。
    lineJoin: 设定线条与线条间接合处的样式（默认是 miter）
        round : 圆角
        bevel : 斜角
        miter : 直角

6. 绘制路径

· 步骤

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

· API

beginPath()  --> 清空路径容器
	新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。

moveTo(x, y)  --> 抬笔
	将笔触移动到指定的坐标x以及y上
	当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点
	
lineTo(x, y)  --> 移动笔
	将笔触移动到指定的坐标x以及y上
	绘制一条从当前位置到指定x以及y位置的直线。

closePath()  --> 闭合路径
	闭合路径之后图形绘制命令又重新指向到上下文中。
		闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。
	如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做
		当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。
	但是调用stroke()时不会自动闭合
	
stroke() --> 绘制线框
	通过线条来绘制图形轮廓。
	不会自动调用closePath()
	
fill()  --> 填充
	通过填充路径的内容区域生成实心的图形。
	自动调用closePath()
	
rect(x, y, width, height)  --> 矩形路径
    绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
    当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。
    也就是说，当前笔触自动重置会默认坐标
    ctx.fillRect() = ctx.rect() + ctx.fill()
    
lineCap  --> 线段末端的属性
	有3个可能的值，分别是：
		butt  :线段末端以方形结束。 
		round :线段末端以圆形结束，即线段两端增加半圆。
		square:线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
	默认值是 butt。

lineJoin  --> 当两条线交汇时,设置或返回所创建边角的类型
	有3个可能的值，分别是：
		bevel  :创建斜角。
		round :创建圆角。
		miter:默认。创建尖角。
    
save  --> 保存全部状态
	保存到栈中的绘制状态有下面部分组成：
        当前的变换矩阵。
        当前的剪切区域。
        当前的虚线列表.
        样式等属性当前的值： strokeStyle, fillStyle,  lineWidth, lineCap, lineJoin..
        
restore --> 在绘图状态栈中弹出顶端的状态 
	将canvas恢复到最近的保存状态的方法。如果没有保存状态，此方法不做任何改变。

    
// 示例    
var canvas = document.getElementById("#canvas");
if(canvas.getContext){
    var ctx = canvas.getContext("2d");
				
    ctx.strokeStyle="deeppink";
    ctx.fillStyle="green"
    ctx.lineWidth=4;

    ctx.moveTo(100,100);
    ctx.lineTo(100,200);
    ctx.lineTo(200,200);
    ctx.closePath();
    ctx.stroke();


    //清空路径容器
    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.lineTo(200,300);
    ctx.lineTo(300,300);
    //fill方法会自动合并路径
    ctx.fill();
}

· 三个容器

/*
	1.路径容器
		每次调用路径api时,都会往路径容器里做登记
		调用beginPath时,清空整个路径容器
	2.样式容器
		每次调用样式api时,都会往样式容器里做登记
		调用save时候,将样式容器里的状态压入样式栈
		调用restor时候,将样式栈的栈顶状态弹出到样式样式容器里,进行覆盖
	3.样式栈
		调用save时候,将样式容器里的状态压入样式栈
		调用restor时候,将样式栈的栈顶状态弹出到样式样式容器里,进行覆盖
*/


    // 基本模板
    var ctx = canvas.getContext("2d");

    ctx.save();
    //关于样式的设置
    //save  restore成对出现
    ctx.beginPath();
    //关于路径
    ctx.restore();

    ctx.save();
    //关于样式的设置
    ctx.beginPath();
    //关于路径

    ctx.fill();
    ctx.restore();

· 签名练习

var canvas =document.getElementById("test");
if(canvas.getContext){
    var ctx = canvas.getContext("2d");
}

canvas.onmousedown=function(ev){
    ev = ev || window.event;
    // 全局捕获
    if(canvas.setCapture){
        canvas.setCapture();
    }
    ctx.beginPath();
    ctx.moveTo(ev.clientX -canvas.offsetLeft,ev.clientY -canvas.offsetTop);
    document.onmousemove=function(ev){
        // save、restore需要放在回调函数内部
        ctx.save();
        ctx.strokeStyle="pink";
        ev = ev || event;
        ctx.lineTo(ev.clientX -canvas.offsetLeft,ev.clientY -canvas.offsetTop);
        ctx.stroke();
        ctx.restore();
    }
    document.onmouseup=function(){
        document.onmousemove=document.onmouseup=null;
        // 释放全局捕获
        if(document.releaseCapture){
            document.releaseCapture();
        }
    }
    return false;
}

7. 绘制曲线

· 圆形

arc(x, y, radius, startAngle, endAngle, anticlockwise) //角度单位为弧度/* 	画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。	ture：逆时针	false:顺时针 */arcTo(x1, y1, x2, y2, radius)/*	根据moveTo起始点和(x1,y1),(x2,y2)两个控制点组成的角，找出与半径radius的圆相切的圆弧，然后与起始点相连。	肯定会从(x1 y1)  但不一定经过(x2 y2);(x2 y2)只是控制一个方向*/

· 二次贝塞尔

quadraticCurveTo(cp1x, cp1y, x, y)/*	绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。	起始点为moveto时指定的点*/

· 三次贝塞尔

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)/*	绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。	起始点为moveto时指定的点*/

? 贝塞尔曲线必过起始点和终点

8. 变换

· API

translate(x, y)/*	我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。	translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量。	在canvas中translate是累加的。*/rotate(angle)/*	这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。	旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法。	在canvas中rotate是累加的。*/	scale(x, y)/* * 缩放一般我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。 *	scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。	值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。	在canvas中scale是累称的。*/

· 示例

var flag =0;var scale = 0;var flagScale = 0;var canvas = document.querySelector("#test");if(canvas.getContext){    var ctx = canvas.getContext("2d");    setInterval(function(){        flag++;        ctx.clearRect(0,0,canvas.width,canvas.height);        ctx.save();        ctx.translate(150,150);        ctx.rotate(flag*Math.PI/180);        if(scale==100){            flagScale=-1;        }else if(scale==0){            flagScale=1;        }        scale+=flagScale;        ctx.scale(scale/50,scale/50);        ctx.beginPath();        ctx.fillRect(-50,-50,100,100);        ctx.restore();    },10)}

9. 使用图片

· 引入图片

/* 	1.canvas操作图片时，必须要等图片加载完才能操作		2.drawImage(image, x, y, width, height)	其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。	这个方法多了2个参数：width 和 height，这两个参数用来控制 当像canvas画入时应该缩放的大小*/var ctx = canvas.getContext("2d");				var img = new Image();img.src="tg.png";img.onload=function(){    draw();}function draw(){    ctx.drawImage(img,0,0,img.width,img.height)}

· 设置背景

/* 	在canvas中设置背景(需要image对象)		createPattern(image, repetition)		image:图像源		repetition:			"repeat" 			"repeat-x" 			"repeat-y" 			"no-repeat" */function draw(){    var pattern = ctx.createPattern(img,"no-repeat")    ctx.fillStyle=pattern;    ctx.fillRect(0,0,300,300);}

· 渐变

1.线性渐变

? createLinearGradient(x1, y1, x2, y2)
? 表示渐变的起点 (x1,y1) 与终点 (x2,y2)

2.径向渐变

? createRadialGradient(x1, y1, r1, x2, y2, r2)
? 前三个参数则定义另一个以(x1,y1) 为原点，半径为 r1 的圆，
? 后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

? gradient.addColorStop(position, color)

? gradient :createLinearGradient的返回值
? addColorStop 方法接受 2 个参数，
? position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。
? 例如，0.5 表示颜色会出现在正中间。
? color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）

10. 绘制文本

· 绘制

? canvas 提供了两种方法来渲染文本:
? fillText(text, x, y)
? 在指定的(x,y)位置填充指定的文本
? strokeText(text, x, y)
? 在指定的(x,y)位置绘制文本边框

· 文本样式

? font
? 当前我们用来绘制文本的样式，这个字符串使用和 CSS font 属性相同的语法。
? 默认的字体是 10px sans-serif。
? font属性在指定时，必须要有大小和字体缺一不可。
textAlign
? 文本对齐选项。可选的值包括： left,right,center 。
? 这里的textAlign="center"比较特殊。textAlign的值为center时候
? 文本的居中是基于你在fillText的时候所给的x的值，
? 也就是说文本一半在x的左边，一半在x的右边

? textBaseline
? 描述绘制文本时，当前文本基线的属性。可选的值包括： top,middle,bottom 。

· measureText

? measureText() 方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）。

· 文本水平垂直居中

window.onload = function(){	var oC =document.getElementById('c1');	var oGC = oC.getContext('2d');	oGC.font = '60px impact';	oGC.textBaseline = 'middle';  //middle bottom	var w = oGC.measureText('尚硅谷').width;	oGC.fillText('尚硅谷',(oC.width - w)/2 , (oC.height - 60)/2);};

· 阴影(文本阴影&盒模型阴影)

? shadowOffsetX | shadowOffsetY
? shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们默认都为 0。
? shadowBlur
? shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
? shadowColor (必需项)
? shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

11. 像素操作

· 获取像素数据

? getImageData()：获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据。

	ctx.getImageData(sx, sy, sw, sh)/*	sx:将要被提取的图像数据矩形区域的左上角 x 坐标。	sy:将要被提取的图像数据矩形区域的左上角 y 坐标。	sw:将要被提取的图像数据矩形区域的宽度。	sh:将要被提取的图像数据矩形区域的高度。*/

? ImageData对象
? ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
? width: 图片宽度，单位是像素
? height: 图片高度，单位是像素
? data: Uint8ClampedArray类型的一维数组，
? 包含着RGBA格式的整型数据，范围在0至255之间（包括255）
? R:0 --> 255(黑色到白色)
? G:0 --> 255(黑色到白色)
? B:0 --> 255(黑色到白色)
? A:0 --> 255(透明到不透明)

· 写入像素数据

? putImageData()方法去对场景进行像素数据的写入。
? putImageData(myImageData, dx, dy)
? dx和dy参数表示你希望在场景内左上角绘制的像素数据所得到的设备坐标
?

· 创建ImageData对象

? ctx.createImageData(width, height)
? width : ImageData 新对象的宽度。
? height: ImageData 新对象的高度。
? 默认创建出来的是透明的

· 操作单个像素（行与列）

// 调用var color = getPxInfo(imgdata,50,50);for(var i=0;i<imgdata.width;i++){    setPxInfo(imgdata,30,i,[0,0,0,255]);}function getPxInfo(imgdata,x,y){    var color = [];    var data = imgdata.data;    var w = imgdata.width;    var h = imgdata.height;    //(x,y)  y*w+x    //r    color[0]=data[(y*w+x)*4];    //g    color[1]=data[(y*w+x)*4+1];    //b    color[2]=data[(y*w+x)*4+2];    //a    color[3]=data[(y*w+x)*4+3];    return color;}function setPxInfo(imgdata,x,y,color){    var data = imgdata.data;    var w = imgdata.width;    var h = imgdata.height;    //(x,y)  y*w+x   x:多少列  y：多少行    //r    data[(y*w+x)*4]=color[0];    //g    data[(y*w+x)*4+1]=color[1];    //b    data[(y*w+x)*4+2]=color[2];    //a    data[(y*w+x)*4+3]=color[3];}

· 马赛克

function draw(){    ctx.drawImage(img,0,0);    var oldImgdata = ctx.getImageData(0,0,img.width,img.height);    var newImgdata = ctx.createImageData(img.width,img.height);     /*     * 马赛克     *        1.选取一个马赛克矩形        2.从马赛克矩形中随机抽出一个像素点的信息(rgba)        3.将整个马赛克矩形中的像素点信息统一调成随机抽出的那个    */        //选取一个马赛克矩形    var size = 5;    for(var i=0;i<oldImgdata.width/size;i++){    	for(var j=0;j<oldImgdata.height/size;j++){    		//(i,j)  每一个马赛克矩形的坐标    		//(0,0):  (0,0)  (4,4);[0,4]   //(1,0): (5,0) (9,4)    		//(0,1):  (0,5)  (4,9)	 	   //(1,1): (5,5) (9,9)    		//Math.random()  [0,1)    		//Math.random()*size  [0,5)    		//Math.floor(Math.random()*size) [0,4]    		//从马赛克矩形中随机抽出一个像素点的信息(rgba)    		var color = getPxInfo(oldImgdata,i*size+Math.floor(Math.random()*size),j*size+Math.floor(Math.random()*size));    		//将整个马赛克矩形中的像素点信息统一调成随机抽出的那个    		for(var a=0;a<size;a++){    			for(var b=0;b<size;b++){    				setPxInfo(newImgdata,i*size+a,j*size+b,color)   		 		}    		}    	}    }    ctx.clearRect(0,0,oc.width,oc.height);    ctx.putImageData(newImgdata,0,0);}

12. 合成

· 全局透明度的设置

? globalAlpha = value
? · 这个属性影响到 canvas 里所有图形的透明度，
? · 有效的值范围是 0.0 （完全透明）到 1.0（完全不透明）
? · 默认是 1.0

· 覆盖合成

? source: 新的图像(源)
? destination: 已经绘制过的图形(目标)

? globalCompositeOperation
? · source-over(默认值): 源在上面,新的图像层级比较高
? · source-in: 只留下源与目标的重叠部分(源的那一部分)
? · source-out: 只留下源超过目标的部分
? · source-atop: 砍掉源溢出的部分

? · destination-over: 目标在上面,旧的图像层级比较高
? · destination-in: 只留下源与目标的重叠部分(目标的那一部分)
? · destination-out: 只留下目标超过源的部分
? · destination-atop: 砍掉目标溢出的部分