【HTML】Canvas(4)-进阶

canvas高级功能

         放大与缩小：用scale函数来实现图形的放大和缩小

         原型：scale(x,y);   x表示在x轴进行缩放，即水平缩放；y表示在y轴上进行缩放，即竖直方向缩放。

 

         放大：

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	//以(10,10)为坐标起点开始绘制一个长150，宽100的黑色矩形
	ctx.beginPath();
	ctx.strokeStyle='#000';
	ctx.strokeRect(10,10,150,100);

	//沿着x轴和y轴的方向将其值放大3倍，并用同样的代码重新绘制一个灰色的矩形
	ctx.scale(3,3);
	ctx.beginPath();
	ctx.strokeStyle='#ccc';
	ctx.strokeRect(10,10,150,100);

从运行效果看出，虽然用了同样的代码，但是第二次绘制的灰色矩形被放大了3倍，且起始坐标也一起被放大了3倍

 

         缩小：

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');
	
	//以(50,50)为坐标起点开始绘制一个长150，宽100的黑色矩形
	ctx.beginPath();
	ctx.strokeStyle='#000';
	ctx.strokeRect(50,50,150,100);

	//沿着x轴和y轴的方向将其值缩小0.5倍，并用同样的代码重新绘制一个灰色的矩形
	ctx.scale(0.5,0.5);
	ctx.beginPath();
	ctx.strokeStyle='#ccc';
	ctx.strokeRect(50,50,150,100);

从运行效果看出，虽然用了同样的代码，但是第二次绘制的灰色矩形被缩小了0.5倍，且起始坐标也一起被小了0.5倍。

使用scale函数时，若参数为负数，可以使图形翻转：

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	var image=new Image();
	image.src='../images/travel.jpg';
	image.onload=function(){
		ctx.drawImage(image,0,0);
		ctx.scale(1,-1);		//设置负数，使图片翻转
		ctx.drawImage(image,192,-168);
	};

平移：translate()函数

         原型：translate(x,y);    x表示在x轴进行平移，即水平方向上平移；y表示在y轴上进行平移，即竖直方向上平移

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	ctx.beginPath();
	ctx.strokeStyle='#000';
	ctx.strokeRect(10,10,150,100);

	ctx.translate(50,100);		//表示在水平方向右移50，垂直方向下移100
	ctx.beginPath();
	ctx.strokeStyle='#ccc';
	ctx.strokeRect(10,10,150,100);

旋转：rotate(angle);     angle是弧度而不是角度。如果角度为angle，那么换算为弧度就是angle*Math.PI/180

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');
	ctx.beginPath();
	ctx.strokeStyle='#000';
	ctx.strokeRect(200,50,100,50);

	ctx.rotate(45*Math.PI/180);
	ctx.strokeStyle='#f00';
	ctx.strokeRect(200,50,100,50);

如上图所示，rotate()实现旋转时，是以canvas的起始坐标(0,0)为中心进行旋转的，如果想要让图形以自己为中心旋转，则需要使用translate()函数：

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');
	ctx.beginPath();
	ctx.strokeStyle='#000';
	ctx.strokeRect(200,50,100,50);

	ctx.translate(250,75);
	ctx.rotate(45*Math.PI/180);
	ctx.translate(-250,-75);
	ctx.beginPath()
	ctx.strokeStyle='#f00';
	ctx.strokeRect(200,50,100,50);

先将canvas的起始坐标向右移250，向下移75，即移到所画矩形的中心处，然后开始旋转45度，接着再将canvas的起始坐标向左移250，向上移75度，即移回到原来位置，这样就完成了图形以自己为中心的旋转。

         图形的渲染：canvas提供了很多对颜色进行操作的API，可实现渐变、反色等效果。

         绘制颜色渐变效果的图形：颜色的渐变分为线性渐变和径向渐变

         线性渐变使用createLinearGradient函数和addColorStop函数实现

         createLinearGradient(x1,y1,x2,y2);       4个参数分别是渐变的出发点坐标(x1,y1)与终点坐标(x2,y2);

         addColorStop(position,color);      position参数必须是0.0到1.0之间的数值，表示渐变中颜色地点的相对地位，color参数表示渐变的颜色。

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	var grd=ctx.createLinearGradient(0,0,200,0);
	grd.addColorStop(0.2,'#0f0');
	grd.addColorStop(0.8,'#f00');
	ctx.fillStyle=grd;
	ctx.fillRect(0,0,200,100);

径向渐变:使用createRadialGradient函数和addColorStop函数实现

         createRadialGradient(x0,y0,r0,x1,y1,r1);      参数x0、y0为开始圆的圆心坐标，r0为开始圆的直径；x1、y1位结束圆的圆心坐标，r1为结束圆的直径。

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	var grd=ctx.createRadialGradient(100,100,10,100,100,50);
	grd.addColorStop(0,'#0f0');
	grd.addColorStop(1,'#f00');
	ctx.fillStyle=grd;
	ctx.fillRect(0,0,200,200);

颜色合成

         globalCompositeOperation属性说明绘制到画布上的颜色是如何与画布上已有颜色组合起来。下面列出其中可能要设置的值以及它们的含义，其中source一词指的是将要绘制到画布上的颜色，destination指画布上已经存在的颜色，默认值是source-over

         copy:只绘制新图形，删除其他所有内容

         darker:在图形重叠的地方，其颜色由两个颜色值相减后决定。

         destination-atop:画布上已有的内容只会在它和新图形重叠的地方保留。新图形绘制与内容之后。

         destination-in:在新图形及画布上已有图形重叠的地方，画布上已有内容都保留。所有其他内容均为透明的。

         destination-out:在画布上已有内容和新图形不重叠的地方，已有内容保留。其他内容均为透明的。

         destination-over:新图形绘制于画布上已有内容的后面。

         lighter：在图形重叠的地方，其颜色由两种颜色值的加值来决定。

         source-atop:只有在新图形和画布上已有内容重叠的地方才绘制新图形。

         source-in:在新图形以及画布上已有内容重叠的地方才绘制新图形，所有其他内容均为透明。

         source-out:只有在和画布上已有图形不重叠的地方才绘制新图形。

         source-over:新图形绘制与画布上已有图形的顶部。默认值。

         xor:在重叠和正常绘制的其他地方，图形都成为透明的。

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	ctx.fillStyle='#0f0';
	ctx.fillRect(10,10,50,50);
	ctx.globalCompositeOperation='xor';
	ctx.beginPath();
	ctx.fillStyle='#f00';
	ctx.arc(50,50,30,0,2*Math.PI);
	ctx.fill();

颜色反转（反相）：就是对图形的每个像素进行颜色取反。

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	var image=new Image();
	image.src='../images/travel.jpg';
	image.onload=function(){
		ctx.drawImage(image,0,0);

		var imagedata=ctx.getImageData(0,0,250,250);
		var pixels=imagedata.data;
		//遍历每个像素并对RGB值进行取反
		for(var i=0,n=pixels.length;i<n;i+=4){
			pixels[i]=255-pixels[i];
			pixels[i+1]=255-pixels[i+1];
			pixels[i+2]=255-pixels[i+2];
		}
		//在指定位置进行像素重绘
		ctx.putImageData(imagedata,250,0);
	};

灰度控制：做法与反相相似，首先对图形的每个像素进行灰度计算

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	var image=new Image();
	image.src='../images/travel.jpg';
	image.onload=function(){
		ctx.drawImage(image,0,0);

		var imagedata=ctx.getImageData(0,0,250,250);
		var pixels=imagedata.data;
		//遍历每个像素并对RGB值进行取反
		for(var i=0,n=pixels.length;i<n;i+=4){
			var grayscale=pixels[i]*0.3+pixels[i+1]*0.59+pixels[i+2]*0.11;
			pixels[i]=grayscale;	//red
			pixels[i+1]=grayscale;	//green
			pixels[i+2]=grayscale;	//blue
		}
		//在指定位置进行像素重绘
		ctx.putImageData(imagedata,250,0);
	};

阴影效果：canvas API中包含了自动为图形添加下拉阴影的属性。阴影的颜色可用shadowColor属性来指定，并且可以通过shadowOffsetX和shadowOffsetY属性来改变。另外，应用到阴影边缘的羽化量也可以使用shadowBlur属性来设置。

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	ctx.shadowColor='#f00';
	ctx.shadowBlur=10;		//羽化
	ctx.shadowOffsetX=20;
	ctx.shadowOffsetY=30;

	var image=new Image();
	image.src='../images/travel.jpg';
	image.onload=function(){
		ctx.drawImage(image,0,0);
	};

自定义画板

         主要思路和步骤如下：

         (1)当鼠标按下的时候，开始描画，此处需要加入鼠标按下事件。

         (2)当鼠标弹起的时候，结束描画，此处需要加入鼠标弹起事件。

         (3)在鼠标按下并且移动的时候，在鼠标经过的路径上画线，此处需要加入鼠标移动事件。

        

         canvas画布的导出功能：

         给画板添加图片导出功能，即复制canvas画板上的图像，使其显示为图片格式。使用canvas.toDataURL('image/png');

         如果想要将图片保存为图片文件，还需要借助PHP或ASP等工具。

         现在我们就在页面上新建一个<img>标签，然后将复制的canvas内容用<img>表示出来。

HTML部分如下：

<canvas id="mycanvas" width="600" height="300">		
    	你的浏览器不支持HTML5
    </canvas>
    <br/>
    <button onclick='lineColor="yellow";'>Yellow</button>
    <button onclick='lineColor="red";'>Red</button>
    <button onclick='lineColor="blue";'>Blue</button>
    <button onclick='lineColor="green";'>Green</button>
    <button onclick='lineColor="white";'>White</button>
    <button onclick='lineColor="orange";'>orange</button>
    <br/>
    <br/>
    <button onclick="linew=4">4px</button>
    <button onclick="linew=8">8px</button>
    <button onclick="linew=16">16px</button>
    <button onclick="copyimage();">Export</button>
    <br/>
    <img src="" id="image_png" width="600" height="300"/>

Javascript部分：

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	//画一个黑色矩形
	ctx.fillStyle='black';
	ctx.fillRect(0,0,600,300);
	//按下标记
	var onoff=false;
	var oldx=-10;
	var oldy=-10;
	//设置颜色
	var lineColor='white';
	//设置线宽
	var linew=4;
	//添加鼠标移动事件
	c.addEventListener('mousemove',draw,true);
	//添加鼠标按下事件
	c.addEventListener('mousedown',down,false);
	//添加鼠标弹起事件
	c.addEventListener('mouseup',up,false);
	function down(event){
		onoff=true;
		oldx=event.pageX-10;
		oldy=event.pageY-10;
	}
	function up(){
		onoff=false;
	}
	function draw(event){
		if(onoff==true){
			var newx=event.pageX-10;
			var newy=event.pageY-10;
			ctx.beginPath();
			ctx.moveTo(oldx,oldy);
			ctx.lineTo(newx,newy);
			ctx.strokeStyle=lineColor;
			ctx.lineWidth=linew;
			ctx.lineCap='round';
			ctx.stroke();

			oldx=newx;
			oldy=newy;
		}
	}
	//导出图片
	function copyimage(event){
		var img_png_src=c.toDataURL('image/png');
		document.getElementById('image_png').src=img_png_src;
	}

Author:致知

Sign:路漫漫其修远兮，吾将上下而求索。

附：

【HTML】Canvas(1)-绘制图形

【HTML】Canvas(2)-绘制文本

【HTML】Canvas(3)-绘制图片