canvas画布基础

canvas画布样式

<canvas width="1000px" height="1000px"></canvas>

js获取canvas画布的节点

var can = document.getElementsByTagName("canvas")[0];
var cxt = can.getContext("2d")
console.log(cxt);

在写canvas画布开始要有开始路径和结束路径

cxt.beginPath();  //开始路径

cxt.closePath();  //关闭路径

1.绘制直线

cxt.beginPath();  //开始路径
cxt.moveTo(300,100);   //起点
cxt.lineTo(500,500); //终点
cxt.strokeStyle = "red";  //颜色
cxt.lineWidth = "10";  //粗细，注意不加单位
cxt.lineCap = "round";  //两端形状，取值round圆的，默认值butt水平 square方形
cxt.stroke();   //绘制  直线的状态都应该些在绘制之上，因为canvae是基于状态的绘制
cxt.closePath();  //关闭路径

2.封装绘制直线的函数

function line(x1, y1, x2, y2, color, width, shape) {
color = color || "#000";  //默认的颜色
width = width || "1";     //默认的宽度
shape = shape || "butt";  //默认的线末端的形状

cxt.beginPath(); //开始路径
cxt.moveTo(x1, y1); //起点
cxt.lineTo(x2, y2); //终点
cxt.strokeStyle = color; //颜色
cxt.lineWidth = width; //粗细，注意不加单位
cxt.lineCap = shape; //两端形状，取值round圆的，默认值butt水平 square方形
cxt.stroke(); //绘制  直线的状态都应该些在绘制之上，
cxt.closePath(); //关闭路径
			}
line(300,100,300,300,"green","10","round");
line(300,300,500,500,"black","10","round");

3.用封装的函数绘制一个三角行

line(50,50,100,200,"black","10","round");
line(100,200,50,200,"black","10","round");
line(100,50,50,200,"black","10","round");

第二种绘制三角形

cxt.beginPath(); //开始路径
			cxt.moveTo(50, 50); //起点
			cxt.lineTo(100, 100); //终点
			cxt.lineTo(50, 200); //终点
			cxt.strokeStyle = "green"; //颜色
			cxt.lineWidth = "10"; //粗细，注意不加单位
			cxt.fillStyle = "#00FFFF";
			cxt.fill();   //填充  先设置填充色再填充，放在绘制之前
			cxt.closePath(); //关闭路径 
			cxt.stroke(); 

4.基础canvas画布绘制正方行

cxt.beginPath(); //开始路径
cxt.moveTo(100, 100); //起点
cxt.lineTo(400, 100); //终点
cxt.lineTo(400, 200); //终点
cxt.lineTo(100, 200); //终点
cxt.strokeStyle = "green"; //颜色
cxt.lineWidth = "10"; //粗细，注意不加单位
cxt.fillStyle = "#00FFFF";
cxt.fill();   //填充  先设置填充色再填充，放在绘制之前
cxt.closePath(); //关闭路径 
cxt.stroke(); //绘制

优化版本

cxt.beginPath(); //开始路径
//cxt.rect(100,100,300,100);  //填充矩形
cxt.strokeStyle = "green"; //颜色
cxt.lineWidth = "10"; //粗细，注意不加单位
cxt.fillStyle = "#00FFFF";
//cxt.fill();   //填充  先设置填充色再填充，放在绘制之前
cxt.fillRect(100,100,300,100); //填充矩形
cxt.strokeRect(100,100,300,100);//矩形的状态并绘制
cxt.closePath(); //关闭路径 
//cxt.stroke(); 

5.绘制、填充扇形，360度的扇形是圆

cxt.beginPath();  //开始路径
cxt.arc(250,250,100,0,Math.PI*2,true); //设置扇形的形状
cxt.strokeStyle = "green"; //颜色
cxt.lineWidth = "10"; //粗细，注意不加单位
cxt.fillStyle = "#00FFFF";
cxt.fill();   //填充  先设置填充色再填充，放在绘制之前
cxt.stroke();
cxt.closePath(); //关闭路径 
			
//有个45°的角
cxt.beginPath();  //开始路径
cxt.arc(500,500,50,0,Math.PI/4,true); //设置扇形的形状
cxt.strokeStyle = "green"; //颜色
cxt.lineWidth = "10"; //粗细，注意不加单位
cxt.fillStyle = "#00FFFF";
cxt.fill();   //填充  先设置填充色再填充，放在绘制之前
cxt.stroke();
cxt.closePath(); //关闭路径 
			
			
cxt.beginPath();  //开始路径
cxt.arc(400,400,50,0,20*Math.PI/180,false); //设置扇形的形状
cxt.strokeStyle = "green"; //颜色
cxt.lineWidth = "10"; //粗细，注意不加单位
cxt.fillStyle = "#00FFFF";
cxt.fill();   //填充  先设置填充色再填充，放在绘制之前
cxt.stroke();
cxt.closePath(); //关闭路径 

6.绘制虚线

cxt.beginPath();  //开始路径
cxt.setLineDash([30,5]);
cxt.lineDashOffset = -0;
cxt.strokeRect(100,100,150,50);
			
cxt.closePath(); //关闭路径 */

7.线性渐变

cxt.beginPath();  //开始路径
var grd = cxt.createLinearGradient(0,0,170,0);
			 
grd.addColorStop(0,"red");
grd.addColorStop(1,"#00FFFF");
cxt.fillStyle = "#00fff";
cxt.fillRect(20,20,150,100);
cxt.closePath();

8.径向渐变

cxt.beginPath();  //开始路径
var grd = cxt.createRadialGradient(100,100,5,90,60,100);  
grd.addColorStop(0,"red");
grd.addColorStop(1,"#00FFFF");
cxt.fillStyle = grd;
cxt.fillRect(10,10,150,150);
cxt.closePath(); //关闭路径

9.圆盘刻度

cxt.beginPath();  //开始路径
cxt.arc(250,250,200,0,Math.PI*2,false); //设置扇形的形状
cxt.stroke();
cxt.closePath(); //关闭路径 */

10.绘制时刻度

for(var i = 0;i<=12;i++){
cxt.save(); //保存
cxt.beginPath();  //开始路径
cxt.translate(250,250);
cxt.rotate(i*30*Math.PI/180);
line(0,-170,0,-185,"#00FFFF","5");
cxt.stroke();
cxt.closePath(); //关闭路径 
cxt.restore();  //恢复
}