| canvas入门篇

canvas入门详解

Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。

但是需要注意，canvas 元素本身并不绘制图形，它只是相当于一张空画布。

如果开发者需要向 canvas 上绘制图形，则必须使用 JavaScript 脚本进行绘制。

canvas 能够做什么

基础图形的绘制
文字的绘制
图形的变形和图片的合成
图片和视频的处理
动画的实现
小游戏的制作

支持的浏览器

大多数现代浏览器都是支持Canvas的,比如 Firefox, safari, chrome, opera的最近版本以及IE9都支持.

IE8及以下不支持HTML5,但是我们可以进行提示用户更新到最新的版本

使用

创建Canvas

1
2
3
4
5
6
7
8
9
 创建 <canvas width="" height="">您的浏览器不支持canvas请更换再试</canvas>
 var canvas =document.querySelector('#id')
 	var context = canvas.getContext('2d')
 	canvas.width="" 	 canva.height="" //可以在canvas对象里面定义宽高
 if(canvas.getContext('2d')){
	var context=canvas.getContext('2d')
}else{
	alert('您的浏览器不支持canvas请更换再试')
}

画线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1. context.moveTo(100,100) 设置初始点位置
2. context.lineTo(600,600) 
3. context.lineWidth= "" 设置线宽
4. context.strokeStylke="" 设置颜色
5. context.lineTo(100,700)
6. context.stroke() //绘制
7. context.moveTo(200,100)
8. context.lineTo(900,700)
9. context.lineWidth=""
10. context.strokeStyle=""
11. context.stroke() //颜色会覆盖
12. context.beginPath() //控制样式开始结束 context.closePath()  可以状态隔离 closePath 可以帮助做闭合
13. context.fillStyle ="" //设置填充颜色
14. context.fill() //填充颜色  线会吃掉一半 fill 和stroke顺序有关 先fill 就可以解决

画弧线

1
2
3
4
5
6
7
8
9
10
11
12
1. context.arc(
	圆心x,圆心y，半径,开始位置，结束位置,是否逆时针  
)
2. context.lineWidth='',context.strokeStyle=''
3. context.arc(300,300,200,0,1.5*Math.PI)
4. context.stroke()
	for(var i=0;i<10;i++){
	context.beginPath();
	context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10)
	context.closePath();//没有就不闭合
	context.stroke();
	}

复杂线形

箭头

  1. 画矩形 context.rect(x,y,width,height)
    context.fillRect()
    context.strokeRect()

线条属性

  1. lineCap 线冒 默认butt尖 round圆 square方

画五星

1
2
3
4
5
6
7
8
9
10
11
12
13
14
for(var i=0;i<5;i++){
	context.LineTo(Math.cos((i*72+18)/180*Math.PI)*300,-Math.sin((18+i*72)/180*Math.PI)*300)
}
function drawStar(x,y,R,r,rotate){
	context.beginPath();
	for(var i=0;i<5;i++){
		context.LineTo(Math.cos((18+i*72+rotate)/180*Math.PI)*R+x,-Math.sin((18+i*72+rotate)/180*Math.PI)*R+y);
		context.LineTo(Math.cos((54+i*72+rotate)/180*Math.PI)*r+x,-Math.sin((54+i*72+rotate)/180*Math.PI)*r+y);
	}
	context.closePath();
	context.lineWidth=''
	context.strokeStyle=''
	context.stroke()
}

线条属性 lineJoin 连接处

默认miter（人字形） round圆 bevel折叠 miterLimit 控制折叠只对miter生效

变换

位移 translate(x,y) 旋转rotate(度数*Math.PI/180) 不用引号也不用单位 缩放scale(sx,sy)
context.save() context.restore()

矩阵变换

1
2
3
4
5
a c e  ad 缩放 bc 倾斜 ef 位移
   b d f 
   0 0 1 	
   context.transform(1,0,0,1,0,0) ab cd ef
   context.setTransform()	//重新绘制