canvas简述

1. 绘制三角形

fill是填充面（实心），stroke是画线（空心）

	<script type="text/javascript">
		//首先，找到 <canvas> 元素:
		var canvas = document.getElementById('myCanvas');
		//然后，创建 context 对象：
		//getContext("2d") 对象是内建的 HTML5 对象，
		//拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
		var context = canvas.getContext('2d');
		
		//canvas 是一个二维网格。
		//canvas 的左上角坐标为 (0,0)
		context.beginPath();
		//moveTo(x,y) 定义线条开始坐标
		context.moveTo(0,0);
		//lineTo(x,y) 定义线条结束坐标
		//绘制三角形
		context.lineTo(0,100);
		context.lineTo(100,100);
		context.lineTo(0,0)
		context.strokeStyle = "#0000FF";
		context.stroke();
//		context.lineWidth = 10;
//		context.fillStyle = "#008000";
//		context.fill();

2. 画圆

lineCap:线帽 有三个参数

• butt 默认。向线条的每个末端添加平直的边缘。
• round 向线条的每个末端添加圆形线帽。
• square 向线条的每个末端添加正方形线帽。

context.arc(参数1,参数2,参数3,参数4,参数5,参数6);

• 参数1 参数2 圆形原点的坐标
• 参数3 半径
• 参数4 绘制圆形的起始角度
• 参数5 绘制圆形的结束角度
• 参数6 顺时针 | 逆时针 参数是布尔：true 逆时针，false 顺时针

context.arc(200,100,100,0,Math.PI,false);

//画圆 
context.beginPath(); // 重新开启一个新的图层
context.arc(200,100,100,0,Math.PI,false);
context.lineCap = "round";
context.lineWidth = 15;
context.strokeStyle = "aquamarine";
context.stroke();

3. 矩形

context.rect(参数1,参数2,参数3,参数4);

• 参数1 ,参数2 矩形绘制的起点位置（参数1为X轴的坐标，参数2为Y轴的坐标）
• 参数3,矩形的宽
• 参数4矩形的高

  创建线条渐变 context.createLinearGradient(参数1,参数2,参数3,参数4);

• 参数1 ,参数2 渐变颜色开始的位置（参数1为X轴的坐标，参数2为Y轴的坐标）
• 参数3,参数4 渐变颜色结束的位置（参数3为X轴的坐标，参数4为Y轴的坐标）

  grd.addColorStop(参数1,参数2);

• 参数1 ,0~1之间的数
• 参数3,参数4 颜色

//矩形
context.beginPath();
context.rect(0,200,200,100);
var grd = context.createLinearGradient(0,200,200,200);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"green");
grd.addColorStop(1,"blue");
context.fillStyle = grd;
context.fill();

创建一个径向/圆渐变 context.createRadialGradient(xStart, yStart,radiusStart,xEnd, yEnd,radiusEnd);

• xStart, yStart 开始圆的圆心的坐标。
• radiusStart 开始圆的半径。
• xEnd, yEnd 结束圆的圆心的坐标。
• radiusEnd 结束圆的半径。

context.beginPath();
context.rect(0,200,200,100);
var grd = context.createRadialGradient(200,200,50,200,200,200);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"green");
grd.addColorStop(1,"blue");
context.fillStyle = grd;
context.fill();

4. 文本

• font - 定义字体
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本
• context.textBaseline 垂直对齐方式
• context.textAlign 水平对齐方式

// bold 可以省略   Arial 不可以省略
context.font = "bold 50px Arial";
context.textBaseline = "middle";
context.textAlign = "center";
var grd = context.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"red");
context.fillStyle = grd; 
context.fillText("hello",100,100);

赏

谢谢你

支付宝

微信