canvas

Canvas简介

Canvas 表示画布，现实生活中的画布是用来作画的。

HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。

利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。

Canvas标签<canvas>

1.使用canvas在网页中创建一个宽400高300的画布

<canvas id="canvas" width="400" height="300">
1111111111111111111111111111111111111111
</canvas>

2.通过javascript获取画布id

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

3.在画布上建立一个2维坐标系(当然也可以建立3维的仅需把参数2d改成webg1)

var context = canvas.getContext('2d');

 绘制线条

初始位置:moveTo(x,y) 

context.moveTo(x, y);

连线端点:lineTo(x,y)

context.lineTo(x, y);

描边:stroke(x,y)

context.stroke();

设置线条样式

线条宽度：linewidth 该属性的取值为数值不带单位

context.lineWidth = 10;

描边颜色：strokestyle，该属性的取值为十六进制颜色值或颜色的英文名DA

context.strokeStyle = '#f00';
context.strokeStyle = 'red';

 端点形状：lineCap 三个属性  round   suqare 

butt：默认效果，无端点，显示直线方形边缘

round：显示圆形端点

square：显示方形端点

context.lineCap = 'round'; 圆形

 填充：fill

context.fill();

定义填充颜色：fillstyle

context.fillStyle = 'green';

设置线条路径

重置路径：beginPath() 表示路径重新开始

 context.beginPath();			// 重置路径

闭合路径：closePath()

context.closePath();    //闭合路径

canvas 绘制矩形

一个红色矩形

<canvas id="canvas" width="400" height="300"></canvas>

<script>
			var canvas = document.getElementById('canvas');	// 获取canvas标签
			var context = canvas.getContext('2d');			// 获得context对象
            
			context.fillStyle = 'red';						// 设置填充颜色
			context.fillRect(0,0,200,100);					// 绘制填充的矩形
		</script>

canvas绘制圆形

arc(x, y, r, start, stop)     参数：（圆心x坐标, 圆心y坐标, 半径r, 开始弧度, 结束弧度）

<script>
    var canvas = document.getElementById('canvas');	// 获取canvas标签
    var context = canvas.getContext('2d');			// 获得context对象
    
    context.arc(100, 100, 50, 0, 360 * Math.PI / 180);	// 绘制圆形
    context.stroke();	// 描边
</script>

canvas 绘制椭圆

 ellipse(x,y,rx,ry,旋转角度,起始角,结束角度,顺时针/逆时针)、

ctx.beginPath()
	ctx.ellipse(150,50,100,50,0,0,2*Math.PI)   // 创建一个椭圆
	ctx.stroke();

绘制文本

font 定义字体样式  

fillText('文本',x,y)绘制实心文本

strokeText(text,x,y)绘制空心文本
 

context.font = '30px Arial';// 设置文本样式
context.fillText('Hello World', 10, 50);    // 绘制实心文字
context.strokeText('Hello World', 10, 50);    // 绘制空心文字

绘制渐变

createLinearGradient() 创建一个线性渐变
addColorStop()指定停止颜色 位置0/1  0开始 1结束
fillstyle 设置填充渐变的样式
strokestyle 设置描边样式

<script>
    var canvas = document.getElementById('canvas');	// 获取canvas标签
    var context = canvas.getContext('2d');			// 获得context对象
    
    var gradient = context.createLinearGradient(0, 0, 200, 0);	// 创建渐变
	gradient.addColorStop(0, 'red');		// 设置渐变颜色（开始）
	gradient.addColorStop(1, 'green');	// 设置渐变颜色（结束）
	context.fillStyle = gradient;				// 设置渐变填充样式
	context.fillRect(10, 10, 200, 80);	// 绘制矩形
</script>