canvas基础知识点总结

╰+攻爆jí腚メ 2022-05-28 03:55 242阅读 0赞

学了两天的canvas了，整理一下所学的知识，总结到一起，加深一下对canvas的理解。嗯、就这样

canvas：负责在页面中设定一个区域，然后就可以通过js动态的在这个区域中绘制图形

canvas基本用法：要使用canvas，必须先设置width和height属性，指定可以绘图的区域大小。（如果不设置，默认大小是width:300px; height:150px;）一般的写法是直接写在行间，也可以写在style样式中，但是写在style中和写在行间的结果会有一定的不同。（后面会举例说明）

要在画布上绘图，需要取得绘图上下文，而取得绘图上下文对象的引用，需要调用getContext()方法，并传入上下文的名字。传入“2d”就可以取得2d上下文对象

var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');

需要注意的是，在使用<canvas>之前，要先检测getContext()方法是否存在，确定浏览器支持<canvas>元素

var oC = document.getElementById('c1');
    	if(oC.getContext){//确定浏览器支持<canvas>元素
    	var oGC = oC.getContext('2d');  }

填充和描边

2d上下文的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变、图像）填充图形；描边，就是只在图形的边画线。操作的属性是fillStyle（填充）和strokeStyle（描边），这两个属性的值可以是字符串、渐变对象或模式对象，而且他们的默认值都是黑色

绘制矩形：

与矩形有关的方法包括：fillRect()、strokeRect()、clearRect()，这三个方法都可以接收四个参数：矩形的x坐标，y坐标，矩形的宽和高（单位都是px）

var oC = document.getElementById('c1');
    	if(oC.getContext){
    	var oGC = oC.getContext('2d');
    }  
    	oGC.fillStyle = 'red';//不写的话默认为黑色
    	//oGC.fillRect(50,50,100,100);
    	
    	oGC.strokeRect(50.5,50.5,100,100);

写得时候，要注意顺序，样式要写在绘图的前面，否则样式显现不出来。

绘制路径

要绘制路径，首先必须要调用beginPath()方法，表示要开始绘制新的路径，然后再通过调用下列方法来实际的绘制路径

rect(x,y,w,h)：从（x,y）开始绘制一个矩形，宽度和高度分别为w,h

arc(x,y,r,start,end,false/true)：以（x,y）为圆心绘制一条弧线，半径为r，起始和结束角度为star和end（用弧度表示），false和true，表示按顺时针或逆时针计算，默认为false(按顺时针计算)

moveTo(x,y)：将绘图图标移动到(x,y)，不画线

lineTo(x,y)：从上一点绘制一条直线，到（x,y）为止

arcTo(x1,y1,x2,y2,r)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定的半径r穿过(x1,y1)

bezierCurveTo(c1x,c1y,c2x,c2,x,y)：从上一点开始绘制一条曲线，到(x,,y)为止，并且以（c1x,c1y）和（c2x,c2y）为控制点

quadraticCurveTo(cx,cy,x,y)：从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)为控制点

创建了路径后，接下来，如果你想要绘制一条连接到路径起点的线条，可以调用closePath()方法。如果路径已经完成，可以调用fill()或者stroke()方法对路径进行填充或描边，也可以调用clip()在路径上创建一个剪切区域。

![2018032910433239][]

绘制文本：

绘制文本的方法主要有两种：fillText()和strokeText(),这两个方法都可以接收四个参数：要绘制的文本字符串，x坐标，y坐标和可选的最大像素宽度（第四个参数并未得到所有浏览器的支持，也可以不写）

三个属性：font：表示文本样式、大小及字体

textAlign：表示文本对齐方式，可能的值有start（left）、end（right）、center。（建议使用start和end代替left和right，因为前两者的意思更稳妥，能同时适合从左到右和从右到左的显示的语言）

textBaseLine：表示文本的基线：可能的值有：top、hanging、middle、alphabetical、ideographic、bottom

2d上下文还提供了辅助确定文本大小的方法measureText(),这个方法接收一个参数，即要绘制的文本，返回一个对象，该对象目前只有一个width属性

看一个实例，让文字在画布上居中显示

var oC =document.getElementById('c1');
           if(oC.getConext){
    	var oGC = oC.getContext('2d');
    	}
    	oGC.font = '60px impact';
    	
    	oGC.textBaseline = 'top';  //middle bottom
    	
    	var w = oGC.measureText('妙味课堂').width;//计算文字的宽度
    	
    	oGC.fillText('妙味课堂',(oC.width - w)/2,(oC.height - 60)/2);//让文字在画布上居中显示

![20180329110348965][]

变换：

方法有：rotate(angle)：围绕原点旋转图像angle弧度

translate(x,y)：将坐标原点移动到(x,y)，执行这个变换后，执行这个变换后，坐标(0,0)会变成之前有(x,y)表示的点

scale(x,y)缩放图像，在x方向上乘以x，在y方向上乘以y，x和y的默认值都是1.0

看个例子，让矩形在一点放大旋转，缩小旋转

绘制图像

2d绘图上下文内置了对图像的支持。如果想要把一幅图像绘制画布中，可以使用drawImage()方法，。根据期望的最终结果不同，调用这个方法时，可以使用三种不同的参数组合。最简单的方式是传入一个HTML<img>元素，以及绘制该图像的起点坐标（x,y），如果想要改变绘制后图像的大小，可以再多传入两个参数，分别表示目标宽度和高度。除了上述两种方式，还可以选择把图像中的某个区域绘制到上下文中。drawImage()方法的这种调用总共需要传入9个参数（要绘制的图像、源图像的坐标，宽高目标图像的坐标和宽高）

var img = doxument.images[0];
    oC.drawImage(img,0,0,40,40,0,100,40,60);

阴影：

属性有：shadowColor：用css3颜色格式表示的阴影颜色，默认为黑色

shadowOffsetX:形状或路径x轴方向的阴影偏移量，默认为0

shadowOffsetY：形状或路径y轴方向的阴影偏移量，默认为0

shadowBlur：模糊的像素数，默认为0，即不模糊

渐变：

哟啊创建一个新的线性渐变，可以调用createLinearGrandient()方法。这个方法接收四个参数：起点的x坐标，起点的y坐标，终点的x坐标，终点的y坐标。调用这个方法后，它就会创建一个指定大小的渐变，并返回CanvasGradient对象实例

创建了渐变对象后，就可以使用addColorStop()方法来指定色标的颜色。这个方法接收两个参数：色标位置和CSS颜色值（色标位置是一个0-1之间的数字）（和css3中的渐变有木有很相似）

当然还可以创建径向渐变，可以使用createRaidalGradient()方法，这个方法接受六个参数，对应着两个圆的圆心和半径，前三个参数指定的是起点圆的圆心和半径，后三个指定的是终点圆的圆心和半径

var oC =document.getElementById('c1');
    	var oGC = oC.getContext('2d');
    	
    	var obj = oGC.createRadialGradient(200,200,100,200,200,150);
    	
    	obj.addColorStop(0,'red');
    	obj.addColorStop(0.5,'yellow');
    	obj.addColorStop(1,'blue');
    	
    	oGC.fillStyle = obj;
    	
    	oGC.fillRect(0,0,oC.width,oC.height);

模式：

模式其实就是重复的图像，可以用来填充或者描边图形。要创建一个新模式，可以调用createPattern()方法并传入两个参数：一个HTML<img>元素和一个表示如何重复图像的字符串。第二个参数的属性值有：repeat、repeat-x、repeat-y、no-repeat（该方法的第一个参数也可以是一个video）元素，或者另一个canvas元素

使用图像数据

2d上下文一个明显的长处就是，可以通过getImageDate()取得原始图像数据。这个方法接收四个参数，要去的其数据的画面区域的x和y坐标以及该区域的像素宽度和高度

var oImg = oGC.getImageData(10,5,50,50）

这里返回的对象是oImg实例，每个oImg对象都有三个属性：width、height和data.其中data属性是一个数组。保存着每一个像素。在data数组中，每一个像素用4个元素来保存，分别表示红、绿、蓝和透明度的值。数组中的每一个元素的值都介于0-255之间。能够直接访问到原始图像数据，就能够以各种方式操作这些数据

还有一个createImageData(w,h):生成新的像素矩阵，初始值是全透明的黑色。可以接收两个参数，代表宽和高

putImageData(oImg,x,y)：设置新的图像数据添加到画布上，接收三个参数：图像对象，坐标

看一个例子：像素点字（这个例子我的博客上写过，此处就不再详细的说了）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    body{ background:black; color:white; font-size:30px;}
    #c1{ background:white;}
    </style>
    <script>
    window.onload = function(){
    	var oC = document.getElementById('c1');
    	var oGC = oC.getContext('2d');
    	
    	var aLi = document.getElementsByTagName('li');
    	
    	for(var i=0;i<aLi.length;i++){
    		aLi[i].onclick = function(){
    			var str = this.innerHTML;
    			
    			var h = 180;
    			var timer = null;
    			clearInterval(timer);
    			var iNow = 0;
    			
    			oGC.clearRect(0,0,oC.width,oC.height);
    			
    			oGC.font = h + 'px impact';
    	
    			oGC.textBaseline = 'top';
    			
    			oGC.fillStyle = 'red';
    	
    			var w = oGC.measureText(str).width;
    	
    			oGC.fillText(str,(oC.width - w)/2,(oC.height - h)/2);
    			
    			var oImg = oGC.getImageData((oC.width - w)/2,(oC.height - h)/2,w,h);
    			oGC.clearRect(0,0,oC.width,oC.height);
    			
    			var arr = randomArr(w*h,w*h/10);
    			
    			var newImg = oGC.createImageData(w,h);
    			
    			timer = setInterval(function(){
    				
    				for(var i=0;i<arr[iNow].length;i++){
    					newImg.data[4*arr[iNow][i]] = oImg.data[4*arr[iNow][i]];
    					newImg.data[4*arr[iNow][i]+1] = oImg.data[4*arr[iNow][i]+1];
    					newImg.data[4*arr[iNow][i]+2] = oImg.data[4*arr[iNow][i]+2];
    					newImg.data[4*arr[iNow][i]+3] = oImg.data[4*arr[iNow][i]+3];
    				}
    			
    				oGC.putImageData(newImg,(oC.width - w)/2,(oC.height - h)/2);
    				if(iNow == 9){
    					iNow = 0;
    					clearInterval(timer);
    				}
    				else{
    					iNow++;
    				}
    				
    			},200);
    			
    			
    			
    		};
    	}
    	
    	function randomArr(iAll,iNow){
    		var arr = [];
    		var allArr = [];
    		for(var i=0;i<iAll;i++){
    			arr.push(i);
    		}
    		
    		for(var j=0;j<iAll/iNow;j++){
    			
    			var newArr = [];
    			
    			for(var i=0;i<iNow;i++){
    				newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
    			}
    			
    			allArr.push(newArr);
    			
    		}
    		
    		
    		return allArr;
    	}
    	
    	
    };
    </script>
    </head>
    
    <body>
    <canvas id="c1" width="400" height="400"></canvas>
    <ul style="float:left;">
    	<li>妙</li>
        <li>味</li>
        <li>课</li>
        <li>堂</li>
    </ul>
    </body>
    </html>

合成：globalAlpha和globalCompositionOperation

globalAlpha是一个介于0和1之间的值，用于指定所有绘制的透明度。默认值为0

globalCompositionOperation表示后绘制的图形怎样与先绘制的图形结合，这个属性的值是字符串，可能的值如下：

source-over（默认值）：后绘制的图形位于先绘制的图形上方

source-in：后绘制的图形与先绘制的图形重叠部分可见，两者其他部分完全透明

source-out：后绘制的图形与先绘制的图形不重叠部分可见，先绘制的图形完全透明

source-atop：后绘制的图形与先绘制的图形重叠部分可见，先绘制的图形不受影响

destination-over：后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分可见

destination-in：后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明

destination-out：后绘制的图形擦除与先绘制的图形重叠的部分

destination-atop：后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会变透明

lighter：后绘制的图形与县绘制的图形重叠部分相加，使该部分变亮

copy:后绘制的图形玩去替代与之重叠的县绘制图形

xor：后悔值的图形与先绘制的图形重叠部分执行“异或”操作。

var oImg = document.getElementById('img1');
    	var oC = document.getElementById('c1');
    	var oGC = oC.getContext('2d');
    	
    	oGC.fillRect(0,0,100,100);
    	
    	oGC.fillStyle = 'red';
    	
    	oGC.globalCompositeOperation = 'xor';
    	
    	oGC.fillRect(50,50,100,100);
    	
    	//alert( oC.toDataURL() );
    	
    	oImg.src = oC.toDataURL();

![20180329175516592][]

这里我们还用到了toDataURL()方法，可以导出canvas元素上绘制的图像，这个方法接收一个参数，即图像的MIME类型格式（默认情况下浏览器会将图像编码为png格式，但这个方法不能兼容一些低版本的浏览器），而且适合用于创建图像的任何上下文。

嗯，好像前面还有一个问题没解决，就是把canvas的宽高设置在行间和设置在style样式中有什么区别，嗯，我们先看个例子

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        body{background:black;}
            canvas{background:#fff;}
            #c2{width:200px; height:200px;}
        </style>
    
    </head>
    <body>
    
    <canvas id="c1" width="200" height="200"><span>该浏览器不支持canvas</span></canvas>
    <canvas id="c2"><span>该浏览器不支持canvas</span></canvas>
    <script>
    var oC1 = document.getElementById('c1');
    var oC2= document.getElementById('c2');
    
    if(oC1.getContext){
        var oGc1 = oC1.getContext('2d');
        oGc1.fillStyle = 'red';
        oGc1.fillRect(0,0,100,100);
        var oGc2 = oC2.getContext('2d');
        oGc2.fillStyle = 'red';
        oGc2.fillRect(0,0,100,100);
    
    }
    </script>
    </body>
    </html>

从这段代码中，我们能看到两个画布除了一个宽高是在行间设置一个是在style中设置，其他的都一样，那我们看下面的显示效果![20180329181031731][]

咿呀，为什么明明都设置的是宽200px，高200px,两个怎么就不一样呢？

其实这是因为，canvas的默认宽高为宽300px;高150px;当我们在行间设置画布宽高的时候，我们在画布上绘制图形的时候不会有任何影响，但如果我们在style中设置画布的宽高的时候，当我们去在画布上绘制图形的时候，绘制的图形会按我们在style中设置的宽高比上默认的宽高乘以自身的宽高，才是它在画布上的宽高。所以我们在对画布设置宽高的时候尽量在行间设置。

嗯，文字不好表述，直接上公式呗

图形的实际宽/高 =  我们为图形设置的宽（高） \*（我们在style样式中为画布设置的宽（高）/画布的默认宽（高））

OK，终于整理完毕

[2018032910433239]: /images/20220528/a477666dd9254f638c6e6f35e178f150.png
[20180329110348965]: /images/20220528/d88ce585777243a19a20c42d6ba76c19.png
[20180329175516592]: /images/20220528/f39be5fb51904a478376f7533143b44e.png
[20180329181031731]: /images/20220528/006b3bfdb49645fea36fd21823ce8bc6.png