Canvas基础教程(章节2)

我不是费圆

发布于 2020-10-10 09:37:08

8850

发布于 2020-10-10 09:37:08

文章被收录于专栏：鲸鱼动画鲸鱼动画

发现一个好玩小技巧，如果浏览器不支持 Canvas 画布怎么办？

别这样写，太 low 了试试这个 ?

哇哦，我学会了。来吧！开始今天的学习内容

渲染上下文

< canvas>会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。我们重点研究 2D渲染上下文。其他的上下文我们暂不研究，比如， WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。 //获得 2d 上下文对象 var ctx = canvas.getContext (‘2d’); 检测支持性 if(canvas.getContext){ var ctx = canvas.getContext(‘2d’); // drawing code here } else{ // canvas-unsupported code here }

基本格式：

<html>
<head>
<title>Canvas 基础</title>
<style>
	canvas{
		border: 1px solid black;
	}
</style>
</head>
<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	function draw(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
	}
	draw();
</script>
</html>

先来复习一下上一章的内容：

如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas 元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素距离上边（Y轴）y像素（坐标为（x,y））。后面我们会涉及到坐标原点的平移、网格的旋转以及缩放等。

绘制一个简单的矩形。 canvast 提供了三种方法绘制矩形：

1.fillRect(x, y, width, height):绘制一个填充的矩形2.strokeRect(x, y, width, height):绘制一个矩形的边框 3.clearRect(x, y, widh, height):清除指定的矩形区域，然后这块区域会变的完全透明。

这3个方法具有相同的参数。 x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点) width, height：指的是绘制的矩形的宽和高。

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.fillRect(10,10,100,50);
		//绘制矩形,填充的默认颜色为黑色
		ctx.strokeRect(10,70,100,50);
		//绘制矩形边框
	}()
</script>
</html>

再添加上这一句：ctx.clearRect(15,15,50,25);

接下来绘制路径 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。每一个路径，甚至一个子路径，都是闭合的。 1.创建路径起始点 2.调用绘制方法去绘制出路径 3.把路径封闭 4.一旦路径生成，通过描边或填充路径区域来渲染图形。 会用到以下方法： 1.beginPath() 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径。 2.moveTo(x, y) 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。 3.closePath() 闭合路径之后，图形绘制命令又重新指向到上下文中 4.stroke() 通过线条来绘制图形轮廓 5.fill() 通过填充路径的内容区域生成实心的图形

绘制线段：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath();//新建一条path
		ctx.moveTo(50,50);//把画笔移动到指定的坐标
		ctx.lineTo(200,50);//绘制一条从当前位置到指定坐标(200, 50)的直线.
		//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
		ctx.closePath();
		ctx.stroke();//绘制路径。
	}()
</script>
</html>

绘制三角形边框：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath(); 
		ctx.moveTo(50,50); 
		ctx.lineTo(200,50); 
		ctx.lineTo(200,200);
		ctx.closePath();
		//虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
		ctx.stroke();//描边。stroke不会自动closePath()
	}()
</script>
</html>

填充三角形：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath(); 
		ctx.moveTo(50,50); 
		ctx.lineTo(200,50); 
		ctx.lineTo(200,200);
		ctx.fill();
		//填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
	}()
</script>
</html>

卧槽！我电脑一直漏电，我不知道什么原因导致的，我现在手臂麻麻的。我再写两句，如果还是麻麻的我就先不写了，我挺怕死的。

绘制圆弧 目前有两种方法可以绘制圆弧： 1.arc(x, y, r, startAngle, endAngle, anticlockwise) 以(x, y)为圆心，以r为半径，从 startAngle弧度开始到 endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针) 注意： 这里的度数都是弧度。 0弧度是指的x轴正方形 radians=(Math.PI/180)*degrees //角度转换成弧度· 1 2.arcTo(x1, y1, x2, y2, radius) 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。 圆弧案例：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath();
		ctx.arc(50,50,40,0, Math.PI/2,false); 
		ctx.stroke();
	}()
</script>
</html>

再多画几个

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath();
		ctx.arc(50,50,40,0, Math.PI/2,false); 
		ctx.stroke();
		ctx.beginPath();
		ctx.arc(150,50,40,0,-Math.PI/2,true); 
		ctx.closePath();
		ctx.stroke(); 
		ctx.beginPath();
		ctx.arc(50,150,40,-Math.PI/2, Math.PI/2,false); 
		ctx.fill();
		ctx.beginPath(); 
		ctx.arc(150,150,40,0, Math.PI,false); 
		ctx.fill();
	}()
</script>
</html>

再来一个：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath(); 
		ctx.moveTo(50,50);
		//参数1、2：控制点1坐标	参数3、4：控制点2坐标参数5：圆弧半径
		ctx.arcTo(200,50,200,200,100);
		ctx.lineTo(200,200);
		ctx.stroke(); 
		ctx.beginPath(); 
		ctx.rect(50,50,10,10); 
		ctx.rect(200,50,10,10);
		ctx.rect(200,200,10,10);
		ctx.fill();
	}()
</script>
</html>