热搜词：UI设计交互动效用户体验htmlcss前端

canvas知识点

2018-1-14

一.canvas有哪些功能

1.绘制图形 
2.使用路径绘图 
3.使用图像 
4.绘制文字

二.使用canvas的步骤

2.1绘制矩形的步骤如下

1.取得canvas元素var canvas = document.getElementById('canvas'); 
2.取得上下文var context = canvas.getContext('2d'); 
3.设定绘图样式（fillStyle和strokeStyle） 
4.指定线宽（lineWidth） 
5.填充与绘制边框（两种方式fill和stroke） 

var canvas = document.getElementById('canvas');  


	var context = canvas.getContext('2d'); context.fillRect(0, 0, 20, 20); context.fillStyle = 'rgba(255,255,0,0.25)'; context.fill(); context.fillStyle = 'red'; context.strokeStyle = 'blue'; context.linewidth = 5; context.fillRect(10, 10, 20,20) context.strokeRect(10, 10, 20,20)

20170606195232644.png


2.2使用路径步骤（首先使用路径勾勒轮廓，然后设置颜色进行绘制）

1.取得canvas元素var canvas = document.getElementById('canvas'); 
2.取得上下文`var context = canvas.getContext(‘2d’); 
3.开始创建路径 
4.创建图形的路径 
5.路径创建完毕后，关闭路径（若没有关闭下次会重绘上次路径） 
6.设定绘制样式，调用绘制方法绘制路径（样式也可提前设置） 

var n=0; for (var i=0; i<10; i++) {
   context.beginPath();
   context.arc(i*25, i*25, i*10, 0, Math.PI*2, true)
   context.closePath();
   context.fillStyle = 'rgba(255,0,0,0.25)';
   context.fill();
}
20170606195601067.png



moveTo与lineTo 

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = 'rgb(255,255,100)';
context.strokeStyle = 'rgb(100,0,100)'; var n = 0; var dx = 80; var dy = 80; var s = 70;
context.beginPath();
context.fillStyle = 'rgb(255,255,100)';
context.strokeStyle = 'rgb(0,0,100)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 15 * 11; for (var i = 0; i < 30;i++){ var x= Math.sin(i*dig); var y= Math.cos(i*dig);
    context.lineTo(dx + x * s, dy + y * s)
 }
context.closePath();
context.fill();
context.stroke(); 

    
	
	
  • 
		1
	
    • 

	
  • 
		2
	
    • 

	
  • 
		3
	
    • 

	
  • 
		4
	
    • 

	
  • 
		5
	
    • 

	
  • 
		6
	
    • 

	
  • 
		7
	
    • 

	
  • 
		8
	
    • 

	
  • 
		9
	
    • 

	
  • 
		10
	
    • 

	
  • 
		11
	
    • 

	
  • 
		12
	
    • 

	
  • 
		13
	
    • 

	
  • 
		14
	
    • 

	
  • 
		15
	
    • 

	
  • 
		16
	
    • 

	
  • 
		17
	
    • 

	
  • 
		18
	
    • 

	
  • 
		19
	
    • 

	
  • 
		20
	
    • 

	
  • 
		21
	
    • 

	
  • 
		22
	
    • 

	
  • 
		23
	
    • 

	
  • 
		
	
    •

20170606200717098.png


2.3绘制图像的步骤

1.取得canvas元素var canvas = document.getElementById('canvas'); 
2.取得上下文var context = canvas.getContext('2d'); 
3.创建Image对象 image = new Image(); 
4.设置Image对象的src属性image.src = 'img/cui.png'; 
5.使用drawImg方法绘制图像（若图片较大最好在image.onload事件中同步执行绘制图像） 

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');
image = new Image();
image.src = 'img/cui.png';
image.onload = function () { drawImg(context,image)
 } function drawImg(context,image){ for (var i=0; i<7; i++){
        context.drawImage(image,0+i*50,0+i*25,100,100);
   }
 }

20170606201420201.png


2.4绘制文字的步骤

1.取得canvas元素var canvas = document.getElementById('canvas'); 
2.取得上下文var context = canvas.getContext('2d'); 
3.设置字体样式 
4.绘制字体（fillText和strokeText） 

/*绘制文字*/ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');
context.fillStyle='#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top'; //填充字符串 context.fillText('王翠',0,0);
context.font = 'bold 30px sans-serif' context.strokeText('王翠',0,50)
context.font = 'italic 20px sans-serif' var txt = '字符串的宽度为：'; // 获取文字宽度 var tml = context.measureText(txt); context.fillText(txt,0,100);
context.fillText(tml.width,tml.width+10,100);

20170606202346861.png


三.canvas高级绘图知识

3.1绘制线性渐变

在绘制基本图形的基础上使用图形上下文的createLinearGradient方法可绘制线性渐变的起始坐标，通过addColorStop设置渐变颜色 

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var g1 = context.createLinearGradient(0,0,0,300) g1.addColorStop(0, 'rgb(255,255,0)');
g1.addColorStop(1, 'rgb(0,255,0)');
context.fillStyle = g1;
context.fillRect(0,0,400,300); var n=0; var g2 = context.createLinearGradient(0,0,300,0)
g2.addColorStop(0, 'rgb(0,255,0)');
g2.addColorStop(1, 'rgb(0,0,255)'); for (var i = 0; i < 10;i++){
   context.beginPath();
   context.fillStyle = g2;
   context.arc(i*25, i*25, i*10, 0, Math.PI*2, true)
   context.closePath();
   context.fill();
}

20170606202720469.png


3.2绘制径向渐变

和绘制线性渐变类似在绘制基本图形的基础上使用图形上下文的createRadialGradient方法可绘制线性渐变的起始坐标，通过addColorStop设置渐变颜色

3.3绘制变形图形

与css3的变形有些类似，canvas的坐标变换有三种方式 
1.平移context.translate(200,50); 
2.扩大context.scale(0.95,0.95); 
3.旋转context.rotate(Math.PI / 10); 

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');
context.fillStyle = '#eeeeff';
context.fillRect(0, 0, 400, 300);     
context.translate(150,20);
context.fillStyle = 'rgba(255,0,0,0.25)'; for (var i=0;i<50; i++){
   context.translate(15,15)
   context.scale(0.95,0.95);
   context.rotate(Math.PI / 10);
   context.fillRect(50, 50, 100,100)
 } 

    
	
	
  • 
		1
	
    • 

	
  • 
		2
	
    • 

	
  • 
		3
	
    • 

	
  • 
		4
	
    • 

	
  • 
		5
	
    • 

	
  • 
		6
	
    • 

	
  • 
		7
	
    • 

	
  • 
		8
	
    • 

	
  • 
		9
	
    • 

	
  • 
		10
	
    • 

	
  • 
		11
	
    • 

	
  • 
		12
	
    • 

	
  • 
		
	
    •

20170606203347226.png


3.4图形组合

在canvas中可以使用globalCompositeOperation决定图形组合的方式 

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var oprtns = 
 ['source-atop','source-in','source-out','source-over','destination-atop','destination-in', 'destination-out','destination-over','lighter','copy','xor'];
var i=8;//可自行修改更换组合方式
// 绘制原有图形（蓝色长方形） context.fillStyle = 'blue' context.fillRect(10,10,60,60) context.globalCompositeOperation = oprtns[i];
// 绘制新图形（红色圆形） context.beginPath(); context.fillStyle = 'red'; context.arc(60,60,30,0,Math.PI*2,false); context.fill(); 

    
	
	
  • 
		1
	
    • 

	
  • 
		2
	
    • 

	
  • 
		3
	
    • 

	
  • 
		4
	
    • 

	
  • 
		5
	
    • 

	
  • 
		6
	
    • 

	
  • 
		7
	
    • 

	
  • 
		8
	
    • 

	
  • 
		9
	
    • 

	
  • 
		10
	
    • 

	
  • 
		11
	
    • 

	
  • 
		12
	
    • 

	
  • 
		13
	
    • 

	
  • 
		14
	
    • 

	
  • 
		
	
    •

20170606203812712.png


3.5给图形绘制阴影

在canvas中可以给图形添加阴影效果，只需要利用以下几个属性 
1.shadowOffsetX（阴影的横向位移量） 
2.shadowOffsetY（阴影的纵向位移量） 
3.shadowColor（阴影的颜色） 
4.shadowBlur（阴影的模糊范围） 

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');
context.fillStyle = '#eeeeff';
context.fillRect(0, 0, 400, 300); 
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = 'rgba(100,100,100,0.5)';
context.shadowBlur = 7.5; for (var i=0;i<3; i++){
   context.translate(50,50)
   create5Star(context);
   context.fill();
} // 绘制5角星 function create5Star(context){ var n = 0; var dx = 100; var dy = 0; var s = 50;
  context.beginPath();
  context.fillStyle = 'rgba(255,0,0,0.5)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 5 * 4;
  context.moveTo(dx,dy); for (var i = 0; i <= 5;i++){ var x= Math.sin(i*dig); var y= Math.cos(i*dig);
      context.lineTo( dx + x * s,dy + y * s);
  }
  context.closePath();
 } 

    
	
	
  • 
		1
	
    • 

	
  • 
		2
	
    • 

	
  • 
		3
	
    • 

	
  • 
		4
	
    • 

	
  • 
		5
	
    • 

	
  • 
		6
	
    • 

	
  • 
		7
	
    • 

	
  • 
		8
	
    • 

	
  • 
		9
	
    • 

	
  • 
		10
	
    • 

	
  • 
		11
	
    • 

	
  • 
		12
	
    • 

	
  • 
		13
	
    • 

	
  • 
		14
	
    • 

	
  • 
		15
	
    • 

	
  • 
		16
	
    • 

	
  • 
		17
	
    • 

	
  • 
		18
	
    • 

	
  • 
		19
	
    • 

	
  • 
		20
	
    • 

	
  • 
		21
	
    • 

	
  • 
		22
	
    • 

	
  • 
		23
	
    • 

	
  • 
		24
	
    • 

	
  • 
		25
	
    • 

	
  • 
		26
	
    • 

	
  • 
		27
	
    • 

	
  • 
		28
	
    • 

	
  • 
		29
	
    • 

	
  • 
		30
	
    • 

	
  • 
		31
	
    • 

	
  • 
		32
	
    • 

	
  • 
		
	
    •

20170606204408116.png


3.6图像剪裁

若你只想保留图像的一部分，可以使用不带参数的clip()方法实现 

/*绘制图像*/ context.fillStyle = '#eeeeff';
context.fillRect(0, 0, 400, 300); 
image = new Image();
image.src = 'img/cui.png';
image.onload = function () drawImg_cut(context,image) }
// 图像剪裁 function drawImg_cut(context,image){ create5Star_edit(context);
  context.drawImage(image,-50,-150,300,300);
} // 绘制5角星 function create5Star_edit(context){ var n = 0; var dx = 70; var dy = 20; var s = 80;
  context.beginPath();
  context.translate(100,50)
  context.fillStyle = 'rgba(255,0,0,0.5)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 5 * 4;
  context.moveTo(dx,dy); for (var i = 0; i <= 5;i++){ var x= Math.sin(i*dig); var y= Math.cos(i*dig);
      context.lineTo( dx + x * s,dy + y * s);
  }
  context.clip();（！！！！重点）
 } 

    
	
	
  • 
		1
	
    • 

	
  • 
		2
	
    • 

	
  • 
		3
	
    • 

	
  • 
		4
	
    • 

	
  • 
		5
	
    • 

	
  • 
		6
	
    • 

	
  • 
		7
	
    • 

	
  • 
		8
	
    • 

	
  • 
		9
	
    • 

	
  • 
		10
	
    • 

	
  • 
		11
	
    • 

	
  • 
		12
	
    • 

	
  • 
		13
	
    • 

	
  • 
		14
	
    • 

	
  • 
		15
	
    • 

	
  • 
		16
	
    • 

	
  • 
		17
	
    • 

	
  • 
		18
	
    • 

	
  • 
		19
	
    • 

	
  • 
		20
	
    • 

	
  • 
		21
	
    • 

	
  • 
		22
	
    • 

	
  • 
		23
	
    • 

	
  • 
		24
	
    • 

	
  • 
		25
	
    • 

	
  • 
		26
	
    • 

	
  • 
		27
	
    • 

	
  • 
		28
	
    • 

	
  • 
		29
	
    • 

	
  • 
		30
	
    • 

	
  • 
		31
	
    • 

	
  • 
		32
	
    • 

	
  • 
		33
	
    • 

	
  • 
		
	
    •

20170606205515522.png











3.7像素处理

使用图形上下文的getImageData来获取图像中的像素 

 context.fillStyle = '#eeeeff';
 context.fillRect(0, 0, 400, 300); 
 image = new Image();
 image.src = 'img/cui.png';
 image.onload = function () { drawImg_px(context,image)
 } // 像素处理(在chrome下会报错，在firefox下运行正常) function drawImg_px(context,image){ context.drawImage(image,0,0,200,200); //会有跨域问题 var imagedata =    context.getImageData(0,0,image.width,image.height); for (var i=0,n=imagedata.data.length;i<n;i+=4){
       imagedata.data[i+0] = 255- imagedata.data[i+0];
       imagedata.data[i+1] = 255- imagedata.data[i+1];
       imagedata.data[i+2] = 255- imagedata.data[i+2];
    };
    context.putImageData(imagedata,0,0)
 } 

    
	
	
  • 
		1
	
    • 

	
  • 
		2
	
    • 

	
  • 
		3
	
    • 

	
  • 
		4
	
    • 

	
  • 
		5
	
    • 

	
  • 
		6
	
    • 

	
  • 
		7
	
    • 

	
  • 
		8
	
    • 

	
  • 
		9
	
    • 

	
  • 
		10
	
    • 

	
  • 
		11
	
    • 

	
  • 
		12
	
    • 

	
  • 
		13
	
    • 

	
  • 
		14
	
    • 

	
  • 
		15
	
    • 

	
  • 
		16
	
    • 

	
  • 
		17
	
    • 

	
  • 
		18
	
    • 

	
  • 
		19
	
    • 

	
  • 
		
	
    •

20170606210239845.png


3.8保存文件

在画布中绘制完成一幅图形后可以使用canvas.toDataURL(type)保存该图形，可以参看我的canvas画图小程序有保存图图像的功能

3.9简单的动画制作

在canvas中制作动画实际就是一个不断擦除，重绘的过程，具体步骤如下 
1.预先编写好绘图的函数，在该函数中先用clearRect方法将画布整体或局部擦除。 
2.使用setInterval方法设置动画的间隔时间。



标签：前端 canvas

<上一篇 | 下一篇>

发表评论：